Question

市面上许多打包工具在转换资源前都需要安装并设定外挂，Parcel 则是原生支援了众多转换及转译器。你可以使用 Babel 转换 JavaScript；使用 PostCSS 转换 CSS 及使用 PostHTML 来转换 HTML。

Parcel 会自动搜寻模组内的设定档，如 .babelrc 和 .postcssrc，并自动执行这些转换，甚至还能转换 node_modules 中的三方套件：若套件中有设定档的话，Parcel 将会针对此套件进行转换。除了 .babelrc 中指定的转换以外，Parcel 还会用 Babel 来将那些新的 JavaScript 语法转换为浏览器可支援的型态，详情请见预设的 Babel 转换一节。

三方模组

.babelrc 这类的设定档并不会套用至 node_modules 内的三方模组，除非模组目录使用软连结（在 monorepo 中常见的做法）且其 package.json 设定了 source 栏位，只有在这种情况下才会套用模组目录内的设定档。下列是所有支援的 source 类型值：

• 将所有档案视为原始码，不更动解析

{
  "main": "foo.js",
  "source": true
}

• 使用原始码编译时，使用 bar.js 作为进入点

{
  "main": "foo.js",
  "source": "bar.js"
}

• 使用原始码编译时，设定档案别名

{
  "main": "foo.js",
  "source": {
    "./foo.js": "./bar.js",
    "./baz.js": "./yay.js"
  }
}

• 使用原始码编译时，使用 glob 设定别名

{
  "main": "foo.js",
  "source": {
    "./lib/**": "./src/$1"
  }
}

此範例的用法可让你以 src 取代整个 lib 目录，当汇入 my-module/lib/test.js 时，将会解析为 my-module/src/test.js。

针对那些根目录有众多档案的套件，如 lodash，则你可以使用 "**": "./src/$1" 这种形式来取代（如：将lodash/cloneDeep 取代为 lodash/src/cloneDeep）。