@startdt/next-preset-app NPM

@startdt/next-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-transform-runtime

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

预设选项

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

modules

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

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

targets

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

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

useBuiltIns

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

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

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

如果该依赖基于一个目标环境不支持的 ES 版本撰写： 将其添加到 vue.config.js 中的 transpileDependencies 选项。这会为该依赖同时开启语法转换和根据使用情况检测兼容库。
如果该依赖交付了 ES5 代码并显式地列出了需要的兼容库： 你可以使用 @startdt/next-preset-app 的 polyfills 选项预包含所需要的兼容库。
如果该依赖交付 ES5 代码，但使用了 ES6+ 特性且没有显式地列出需要的兼容库（例如 Vuetify）： 请使用 useBuiltIns: 'entry' 然后在入口文件添加 import 'core-js/stable'; import 'regenerator-runtime/runtime';。这会根据 browserslist 目标导入所有兼容库，这样你就不用再担心依赖的兼容库问题了，但是因为包含了一些没有用到的兼容库，所以最终的包大小可能会增加。