babel css3新特性[email protected]/polyfill 中文翻译

原文档链接：https://babeljs.io/docs/en/babel-polyfill

As of Babel 7.4.0, this package has been deprecated in favor of directly including

core-js/stable

(to polyfill ECMAScript features) and

regenerator-runtime/runtime

(needed to use transpiled generator functions):

从Babel 7.4.0开始，此软件包已被废弃，推荐直接包含core-js / stable（用来支持ECMAScript 新功能的 polyfill）和regenerator-runtime / runtime（需要使用转义的生成器函数）：

import "core-js/stable";
import "regenerator-runtime/runtime";
           

Babel includes a polyfill that includes a custom regenerator runtime and core-js.

Babel 包含一个内部定制了 regenerator runtime 和 core-js 的 polyfill 。

This will emulate a full ES2015+ environment (no < Stage 4 proposals) and is intended to be used in an application rather than a library/tool. (this polyfill is automatically loaded when using

babel-node

).

这将模拟一个全功能的 ES2015+ 环境（没有<阶段4建议），它被设计用于编写业务代码而不建议用于编写类库或工具函数（当使用 babel-node 时这个 polyfill 将自动加载）。

This means you can use new built-ins like

Promise

or

WeakMap

, static methods like

Array.from

or

Object.assign

, instance methods like

Array.prototype.includes

, and generator functions (provided you use the regenerator plugin). The polyfill adds to the global scope as well as native prototypes like

String

in order to do this.

这意味着你可以使用新的内建函数，比如 Promise or WeakMap，新的静态方法，比如 Array.from 或 Object.assign，新的实例方法比如 Array.prototype.includes，以及生成器函数（前提是你使用了 regenerator 插件）。为了做到就像使用 String 一样的原生 prototypes 一样，这个 polyfill 向全局环境注入新方法。

Installation 安装

npm install --save @babel/polyfill
           

Because this is a polyfill (which will run before your source code), we need it to be a

dependency

, not a

devDependency

因为这是一个 polyfill（需要在所有源代码之前运行），我们需要将它放在 dependency 中，而不是放在 devDependency 中。

Size 大小

The polyfill is provided as a convenience but you should use it with

@babel/preset-env

and the

useBuiltIns option

so that it doesn't include the whole polyfill which isn't always needed. Otherwise, we would recommend you import the individual polyfills manually.

虽然这个 polyfill 设计用来更方便的使用，但是你依然需要配合 @babel/preset-env 插件和 useBuiltIns 选项一起使用，因为有些新方法或函数我们并没有使用，所以不需要完整引入整个 polyfill。另外我们建议你手动导入自己需要的腻子脚本。

TC39 Proposals TC39 建议书

If you need to use a proposal that is not Stage 4,

@babel/polyfill

will not automatically import those for you. You will have to import those from another polyfill like

core-js

individually. We may work towards including this as separate files in

@babel/polyfill

soon.

如果你需要使用并不在阶段4提议中的新方法，@babel/polyfill 并不会为你自动导入。你需要从别的腻子脚本中导入，比如从 core-js 中单独导入。我们会尽快将这些新特性加入 @babel/polyfill 中。

Usage in Node / Browserify / Webpack

To include the polyfill you need to require it at the top of the

entry point

to your application.

在这些工具中使用 polyfill 你需要在你的应用入口文件的顶部引用它。

Make sure it is called before all other code/require statements!

确保它会在所有其他代码语句前调用！

require("@babel/polyfill");
           

If you are using ES6's

import

syntax in your application's

entry point

, you should instead import the polyfill at the top of the

entry point

to ensure the polyfills are loaded first:

如果你在你的应用入口文件中使用 ES6 的 import 语法，你应该在入口文件的顶部引用它来确保它会被首先加载：

import "@babel/polyfill";
           

With webpack, there are multiple ways to include the polyfills:

使用 webpack 时，这里有许多方式来配置使用：

• When used alongside

  @babel/preset-env

  ,
• 当使用 @babel/preset-env 插件时，
  • If

    useBuiltIns: 'usage'

    is specified in

    .babelrc

    then do not include

    @babel/polyfill

    in either

    webpack.config.js

    entry array nor source. Note,

    @babel/polyfill

    still needs to be installed.
  • 如果在 .babelrc 文件中配置 useBuiltIns: 'usage' ，不需要在 webpack.config.js 入口文件或源代码中配置 @babel/polyfill，但是仍然需要安装 @babel/polyfill 插件。
  • If

    useBuiltIns: 'entry'

    is specified in

    .babelrc

    then include

    @babel/polyfill

    at the top of the entry point to your application via

    require

    or

    import

    as discussed above.
  • 如果在 .babelrc 文件中配置 useBuiltIns: 'entry'，则如上文所说需要在应用入口文件通过 require 或 import 语句导入@babel/polyfill。
  • If

    useBuiltIns

    key is not specified or it is explicitly set with

    useBuiltIns: false

    in your .babelrc, add

    @babel/polyfill

    directly to the entry array in your

    webpack.config.js

    .
  • 如果 .babelrc 中 useBuiltIns 未配置或者配置为 false，则需要在 webpack.config.js 中添加 @babel/polyfill 配置。

module.exports = {
  entry: ["@babel/polyfill", "./app/js"],
};
           

• If

  @babel/preset-env

  is not used then add

  @babel/polyfill

  to webpack entry array as discussed above. It can still be added at the top of the entry point to application via

  import

  or

  require

  , but this is not recommended.
• 如果并未使用 @babel/preset-env，却如上文所述在 webpack 入口文件配置中配置了@babel/polyfill。通过 import 或 require 语句在入口文件顶部添加 @babel/polyfill 依然能够正常使用，但是并不推荐这样使用。

We do not recommend that you import the whole polyfill directly: either try the

useBuiltIns

options or import only the polyfills you need manually (either from this package or somewhere else). 我们并不推荐你一开始就导入整个 polyfill，尝试使用 useBuiltIns 配置选项或者手动导入你需要的腻子脚本（从此包引入或者其他地方引入都可以）

Usage in Browser 在浏览器中使用

Available from the

dist/polyfill.js

file within a

@babel/polyfill

npm release. This needs to be included

before

all your compiled Babel code. You can either prepend it to your compiled code or include it in a

<script>

before it.

从 @babel/polyfill 的 npm 包的 dist/polyfill.js 中获取文件。必须在所有已编译的 Babel 代码之前将其包括在内。你可以将其添加到已编译的代码之前，也可以将其包含在<script>中。 NOTE:

Do not

require

this via browserify etc, use

@babel/polyfill

.

注意：不要通过browserify等来使用，请使用@ babel / polyfill。

Details 细节

If you are looking for something that won't modify globals to be used in a tool/library, checkout the

transform-runtime

plugin. This means you won't be able to use the instance methods mentioned above like

Array.prototype.includes

. 如果你正在寻找用于类库编写的不会污染全局变量的东西，检出 transform-runtime 插件。这意味着您将无法使用上述诸如 Array.prototype.includes 的实例方法。

Note: Depending on what ES2015 methods you actually use, you may not need to use

@babel/polyfill

or the runtime plugin. You may want to only load the specific polyfills you are using (like

Object.assign

) or just document that the environment the library is being loaded in should include certain polyfills.

注意：你可能没有必要使用 @babel/polyfill，这取决于你实际使用了哪些 ES2015 的方法。你可能只想加载你正在使用的特定的腻子脚本（比如 Object.assign）或者仅记录正在加载库环境应包含的某些腻子脚本。