🐠 转换

尽管许多打包器(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";