盡管許多 打包器(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 `
**PostHTML**
****
PostHTML 是一個用插件轉換 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";
~~~