企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
尽管许多 打包器(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"; ~~~