Parcel轉(zhuǎn)換
轉(zhuǎn)換
盡管許多 打包器(bundler) 都要求你安裝和配置插件來轉(zhuǎn)換資源，Parcel 內(nèi)置許多長江的轉(zhuǎn)換和轉(zhuǎn)譯器，讓你開箱即用。你可以使用 Babel 轉(zhuǎn)換 JavaScript，CSS 使用 PostCSS ，HTML 使用 PostHTML 。當(dāng)在模塊中找到配置文件（例如 .babelrc ，.postcssrc ）時(shí)， Parcel 會(huì)自動(dòng)運(yùn)行這些轉(zhuǎn)換。
這甚至可以在第三方 node_modules 中工作：如果配置文件是作為包的一部分發(fā)布的，轉(zhuǎn)換會(huì)自動(dòng)打開，且僅適用于該模塊。由于只處理需要轉(zhuǎn)換的模塊，因此可以快速打包。這也意味著您不需要手動(dòng)配置轉(zhuǎn)換來包含和排除某些文件，或者知道第三方代碼是如何構(gòu)建的，以便在你的應(yīng)用程序中使用它。
Babel
Babel 是一個(gè)流行的 JavaScript 轉(zhuǎn)譯器，擁有大量的插件生態(tài)系統(tǒng)。在 Parcel 中使用 Babel 的方式與其單獨(dú)使用或與其他打包器配合使用的方式相同。
在你的應(yīng)用程序中安裝預(yù)設(shè)和插件：
yarn add babel-preset-env
然后，創(chuàng)建一個(gè) .babelrc 文件：
{
"presets": ["env"]
}PostCSS
PostCSS 是一個(gè)用插件轉(zhuǎn)換 CSS 的工具，比如 autoprefixer, cssnext, 和 CSS Modules。 您可以使用以下名稱之一創(chuàng)建配置文件，從而使 Parcel 使用 PostCSS 配置 ： .postcssrc (JSON), .postcssrc.js, 或者 postcss.config.js.
在你的應(yīng)用程序中安裝插件：
yarn add postcss-modules autoprefixer
然后，創(chuàng)建一個(gè) .postcssrc 文件：
{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": true
}
}
}插件指定在 plugins 對象的 key 中，并選項(xiàng)定義使用對象值。 如果插件沒有選項(xiàng)，只需將其設(shè)置為 true 即可。
Autoprefixer ， cssnext 和其他工具的目標(biāo)瀏覽器可以在 .browserslistrc 文件中指定：
> 1% last 2 versions
CSS Modules 的啟用方式稍有不同，在頂級 modules key 上使用。這是因?yàn)?Parcel 需要對 CSS Modules 有特殊的支持，因?yàn)樗鼈円矔?huì)導(dǎo)出一個(gè)對象，包含到 JavaScript 包中。請注意，你仍然需要在你的項(xiàng)目中安裝 postcss-modules 。
PostHTML
PostHTML 是一個(gè)用插件轉(zhuǎn)換 HTML 的工具。您可以使用以下名稱之一創(chuàng)建配置文件，從而使 Parcel 使用 PostHTML 配置 ：.posthtmlrc (JSON), posthtmlrc.js, 或者 posthtml.config.js.
在你的應(yīng)用程序中安裝插件：
yarn add posthtml-img-autosize
然后，創(chuàng)建一個(gè) .posthtmlrc 文件：
{
"plugins": {
"posthtml-img-autosize": {
"root": "./images"
}
}
}插件指定在 plugins 對象的 key 中，并選項(xiàng)定義使用對象值。 如果插件沒有選項(xiàng)，只需將其設(shè)置為 true 即可。
TypeScript
TypeScript 是 JavaScript 類型的超集，可以編譯成普通的JavaScript，它也支持現(xiàn)代的 ES2015+ 特性。 無需任何額外的配置即可轉(zhuǎn)換 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";