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）或者僅記錄正在加載庫環境應包含的某些膩子腳本。