@startdt/babel-preset-app

@startdt/babel-preset-app

Next CLI 项目默认的 Babel 预设（Preset）。

注意：仅适用于通过 Next CLI 创建的项目，并且不考虑外部用例。

功能特性

@babel/preset-env

preset-env 根据目标浏览器自动检测需要的语法转换（transform）和兼容库（polyfill）。

• modules: false
  • 在运行 Jest 测试时自动设置为 'commonjs'
• useBuiltIns: 'usage'
• targets:
  • 默认情况下，@babel/preset-env 将使用 browserslist 配置，除非设置了 targets 或 ignoreBrowserslistConfig 选项
  • 在 Node.js 中运行单元测试时设置为 { node: 'current' }
• Promise 将被默认包含，因为现在的库依赖 Promise 是非常普遍的

Stage 3 或新特性

仅支持以下候选功能（Stage 3 阶段）或特性（Object 的 rest 和 spread 已作为 preset-env 预设的一部分被支持）：

• 动态导入
• 类属性
• 装饰器

如果需要额外的候选功能或其他特性，则需要自己进行安装和配置。

Vue JSX 语法

• @babel/plugin-syntax-jsx
• @vue/babel-preset-jsx

@babel/plugin-transform-runtime

transform-runtime 避免在每个文件中内联 Babel 辅助函数（helper）。仅对辅助函数启用以节省代码体积，兼容库则是通过 babel-preset-env 进行处理。

预设选项

• 支持 @babel/preset-env 的所有选项，其中一些选项有更智能的默认值。

modules

• 默认值：
  • false 在 webpack 构建时
  • 'commonjs' 在运行 Jest 测试时

如需显式地设置 modules 选项，请参阅 @babel/preset-env 文档。

targets

• 默认值：
  • @startdt/babel-preset-app 将使用 browserslist 配置，除非设置了 targets 或 ignoreBrowserslistConfig 选项
  • 在 Node.js 中运行单元测试时设置为 { node: 'current' }

如需显式地设置 targets 选项，请参阅 @babel/preset-env 文档。

useBuiltIns

• 默认值：'usage'
• 可选值：'usage' | 'entry' | false

默认情况下，@startdt/babel-preset-app 会把 useBuiltIns: 'usage' 传递给 @babel/preset-env，这样它会根据源代码中出现的语言特性自动检测需要的兼容库。这确保了最终包里兼容库数量的最小化。然而，这也意味着如果其中一个依赖需要特殊的兼容库，默认情况下 Babel 无法将其检测出来。

如果有依赖需要兼容库，你有几种选择：

• 如果该依赖基于一个目标环境不支持的 ES 版本撰写： 将其添加到 vue.config.js 中的 transpileDependencies 选项。这会为该依赖同时开启语法转换和根据使用情况检测兼容库。

• 如果该依赖交付了 ES5 代码并显式地列出了需要的兼容库： 你可以使用 @startdt/babel-preset-app 的 polyfills 选项预包含所需要的兼容库。

• 如果该依赖交付 ES5 代码，但使用了 ES6+ 特性且没有显式地列出需要的兼容库（例如 Vuetify）： 请使用 useBuiltIns: 'entry' 然后在入口文件添加 import 'core-js/stable'; import 'regenerator-runtime/runtime';。这会根据 browserslist 目标导入所有兼容库，这样你就不用再担心依赖的兼容库问题了，但是因为包含了一些没有用到的兼容库，所以最终的包大小可能会增加。

当你构建一个库或是 Web Component 时，推荐给 @startdt/babel-preset-app 传入 useBuiltIns: false 选项。这能够确保你的库或是组件不包含不必要的兼容库。通常来说，打包兼容库应当是最终使用你的库的应用的责任。

更多兼容库处理细节，请参阅 @babel/preset-env 文档。

polyfills

• 默认值：['es.array.iterator', 'es.promise', 'es.object.assign', 'es.promise.finally']

当使用 useBuiltIns: 'usage' 时将预包含 core-js 的所有兼容库。如果这里列出的兼容库在 browserslist 的目标中不需要，则它会被自动排除。

如果有第三方依赖未经过 Babel 处理且需要特殊的兼容库（例如，Axios 和 Vuex 需要 Promise 支持）时，请使用 polyfills 选项预包含所需要的兼容库。

jsx

• 默认值：true.

设置为 false 禁用 JSX 支持。或者在这里配置 @vue/babel-preset-jsx 的特性。

loose

• 默认值：false.

设置为 true 将会生成性能更高但不符合规范的代码。

entryFiles

• 默认值：[]

使用 entryFiles 以确保向多页应用的所有入口文件中注入兼容库。