mirror of
https://github.com/vuejs/vue-cli.git
synced 2026-01-15 11:50:19 -06:00
docs: add a note on polyfills in lib/wc
This commit is contained in:
@@ -10,6 +10,8 @@ See [here][browserslist] for how to specify browser ranges.
|
||||
|
||||
A default Vue CLI project uses [@vue/babel-preset-app][babel-preset-app], which uses `@babel/preset-env` and the `browserslist` config to determine the Polyfills needed for your project.
|
||||
|
||||
### useBuiltIns: 'usage'
|
||||
|
||||
By default, it passes [`useBuiltIns: 'usage'`](https://new.babeljs.io/docs/en/next/babel-preset-env.html#usebuiltins-usage) to `@babel/preset-env` which automatically detects the polyfills needed based on the language features used in your source code. This ensures only the minimum amount of polyfills are included in your final bundle. However, this also means **if one of your dependencies has specific requirements on polyfills, by default Babel won't be able to detect it.**
|
||||
|
||||
If one of your dependencies need polyfills, you have a few options:
|
||||
@@ -40,6 +42,10 @@ If one of your dependencies need polyfills, you have a few options:
|
||||
|
||||
See [@babel-preset/env docs](https://new.babeljs.io/docs/en/next/babel-preset-env.html#usebuiltins-usage) for more details.
|
||||
|
||||
### Polyfills when Building as Library or Web Components
|
||||
|
||||
When using Vue CLI to [build a library or Web Components](./build-targets.md), it is recommended to pass `useBuiltIns: false` to `@vue/babel-preset-app` to disable automatic polyfill injection. This ensures you don't include unnecessary polyfills in your code, as it should be the responsibility of the consuming app to include polyfills.
|
||||
|
||||
## Modern Mode
|
||||
|
||||
With Babel we are able to leverage all the newest language features in ES2015+, but that also means we have to ship transpiled and polyfilled bundles in order to support older browsers. These transpiled bundles are often more verbose than the original native ES2015+ code, and also parse and run slower. Given that today a good majority of the modern browsers have decent support for native ES2015, it is a waste that we have to ship heavier and less efficient code to those browsers just because we have to support older ones.
|
||||
|
||||
@@ -8,6 +8,8 @@
|
||||
|
||||
## Polyfill
|
||||
|
||||
### useBuiltIns: 'usage'
|
||||
|
||||
一个默认的 Vue CLI 项目会使用 [@vue/babel-preset-app][babel-preset-app],它通过 `@babel/preset-env` 和 `browserslist` 配置来决定项目需要的 polyfill。
|
||||
|
||||
默认情况下,它会把 [`useBuiltIns: 'usage'`](https://new.babeljs.io/docs/en/next/babel-preset-env.html#usebuiltins-usage) 传递给 `@babel/preset-env`,这样它会根据源代码中出现的语言特性自动检测需要的 polyfill。这确保了最终包里 polyfill 数量的最小化。然而,这也意味着**如果其中一个依赖需要特殊的 polyfill,默认情况下 Babel 无法将其检测出来。**
|
||||
@@ -40,6 +42,10 @@
|
||||
|
||||
更多细节可查阅 [@babel-preset/env 文档](https://new.babeljs.io/docs/en/next/babel-preset-env.html#usebuiltins-usage)。
|
||||
|
||||
### 构建库或是 Web Component 时的 Polyfills
|
||||
|
||||
当使用 Vue CLI 来[构建一个库或是 Web Component](./build-targets.md) 时,推荐给 `@vue/babel-preset-env` 传入 `useBuiltIns: false` 选项。这能够确保你的库或是组件不包含不必要的 polyfills。通常来说,打包 polyfills 应当是最终使用你的库的应用的责任。
|
||||
|
||||
## 现代模式
|
||||
|
||||
有了 Babel 我们可以兼顾所有最新的 ES2015+ 语言特性,但也意味着我们需要交付转译和 polyfill 后的包以支持旧浏览器。这些转译后的包通常都比原生的 ES2015+ 代码会更冗长,运行更慢。现如今绝大多数现代浏览器都已经支持了原生的 ES2015,所以因为要支持更老的浏览器而为它们交付笨重的代码是一种浪费。
|
||||
|
||||
@@ -39,6 +39,8 @@ If you need additional stage 3 or below features, you need to install and config
|
||||
|
||||
## Options
|
||||
|
||||
- All options from [@babel/preset-env](https://babeljs.io/docs/en/next/babel-preset-env.html) are supported, with some of them having smarter defaults.
|
||||
|
||||
### modules
|
||||
|
||||
- Default:
|
||||
@@ -64,6 +66,8 @@ Explicitly set `useBuiltIns` option for `babel-preset-env`.
|
||||
|
||||
The default value is `'usage'`, which adds imports to polyfills based on the usage in transpiled code. For example, if you use `Object.assign` in your code, the corresponding polyfill will be auto-imported if your target environment does not supports it.
|
||||
|
||||
If you are building a library or web component instead of an app, you probably want to set this to `false` and let the consuming app be responsible for the polyfills.
|
||||
|
||||
Note that the usage detection does not apply to your dependencies (which are excluded by `cli-plugin-babel` by default). If one of your dependencies need polyfills, you have a few options:
|
||||
|
||||
1. **If the dependency is written in an ES version that your target environments do not support:** Add that dependency to the `transpileDependencies` option in `vue.config.js`. This would enable both syntax transforms and usage-based polyfill detection for that dependency.
|
||||
|
||||
Reference in New Issue
Block a user