Parcel轉換

轉換
儘管許多打包器(bundler) 都要求你安裝和設定插件來轉換資源，Parcel 內建許多長江的轉換和轉譯器，讓你開箱即用。你可以使用 Babel 轉換 JavaScript，CSS 使用 PostCSS ，HTML 使用 PostHTML 。當在模組中找到設定檔（例如 .babelrc ，.postcssrc ）時， Parcel 會自動執行這些轉換。
這甚至可以在第三方 node_modules 中運作：如果設定檔是作為套件的一部分發布的，轉換會自動打開，且僅適用於該模組。由於只處理需要轉換的模組，因此可以快速打包。這也意味著您不需要手動配置轉換來包含和排除某些文件，或者知道第三方程式碼是如何建構的，以便在您的應用程式中使用它。
Babel
Babel 是一個流行的 JavaScript 轉譯器，擁有大量的插件生態系統。在 Parcel 中使用 Babel 的方式與其單獨使用或與其他打包器搭配使用的方式相同。
在你的應用程式中安裝預設和外掛程式：

yarn add babel-preset-env

然後，建立一個.babelrc 檔案：

{
  "presets": ["env"]
}

##PostCSS PostCSS 是一個用外掛程式轉換CSS 的工具，像是autoprefixer, cssnext, 和CSS Modules。您可以使用以下名稱之一建立設定文件，從而使Parcel 使用PostCSS 配置： .postcssrc (JSON), .postcssrc.js, 或者postcss.config.js.
在你的應用程式中安裝插件：

yarn add postcss-modules autoprefixer

然後，建立一個.postcssrc 檔案：

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

外掛程式指定在plugins 物件的key 中，並選項定義使用物件值。如果插件沒有選項，只需將其設為 true 即可。

Autoprefixer ， cssnext 和其他工具的目標瀏覽器可以在 .browserslistrc 檔案中指定：

> 1%
last 2 versions

CSS Modules 的啟用方式稍有不同，在頂級 modules key 上使用。這是因為 Parcel 需要對 CSS Modules 有特殊的支持，因為它們也會匯出一個對象，包含到 JavaScript 套件中。請注意，你仍然需要在你的專案中安裝 postcss-modules 。

PostHTMLPostHTML 是用外掛程式轉換 HTML 的工具。您可以使用以下名稱之一建立設定文件，從而使Parcel 使用PostHTML 設定：.posthtmlrc (JSON), posthtmlrc.js, 或posthtml.config.js.
在你的應用程式中安裝外掛程式：

yarn add posthtml-img-autosize

然後，建立一個.posthtmlrc 檔案：

{
  "plugins": {
    "posthtml-img-autosize": {
      "root": "./images"
    }
  }
}

外掛程式指定在 plugins 物件的 key 中，並選項定義使用物件值。如果插件沒有選項，只需將其設為 true 即可。
TypeScript
TypeScript 是 JavaScript 型別的超集，可以編譯成普通的JavaScript，它也支援現代的 ES2015 功能。無需任何額外的配置即可轉換 TypeScript 。

<!-- index.html -->
<html>
<body>
  <script src="./index.ts"></script>
</body>
</html>
// index.ts
import message from "./message";
console.log(message);
// message.ts
export default "Hello, world";

Parcel轉換

PHP中文網