Skip to main content

注意事项

Polyfills​

为了让某些功能正常工作,它们需要特定的 polyfill。你可以通过使用完整的 polyfill 来满足 所有 Babel 功能需求,例如 core-js/actual,或者(如果你想通过 <script> 标签加载它)core-js-bundle。

🌐 In order for certain features to work they require certain polyfills. You can satisfy all Babel feature requirements by using a complete polyfill such as core-js/actual or (if you want to load it using a <script> tag) core-js-bundle.

你可以选择/选择性地包括你需要的内容:

🌐 You may alternatively/selectively include what you need:

功能要求
数组解构, For OfSymbol, prototype[Symbol.iterator]
展开运算符Array.from

如果你正在将生成器或异步函数编译到 ES5,并且你使用的 @babel/core 或 @babel/plugin-transform-regenerator 版本低于 7.18.0,你还必须加载 regenerator runtime 包。当使用 @babel/preset-env 的 useBuiltIns: "usage" 选项或 @babel/plugin-transform-runtime 时,它会自动加载。

🌐 If you are compiling generators or async function to ES5, and you are using a version of @babel/core or @babel/plugin-transform-regenerator older than 7.18.0, you must also load the regenerator runtime package. It is automatically loaded when using @babel/preset-env's useBuiltIns: "usage" option or @babel/plugin-transform-runtime.

内置​

🌐 Built-ins

Babel 假设内置对象(例如 Array、WeakMap 等)如果有使用 polyfill,会以符合规范的方式被修改。

🌐 Babel assumes that built-ins (e.g. Array, WeakMap and others), if polyfilled, are modified in a manner that is spec-compliant.

类​

🌐 Classes

像 Date、Array、DOM 这样的内置类由于 ES5 的限制(针对 transform-classes 插件),无法被正确地子类化。你可以尝试基于 Object.setPrototypeOf 和 Reflect.construct 使用 babel-plugin-transform-builtin-extend,但它也有一些限制。

🌐 Built-in classes such as Date, Array, DOM etc cannot be properly subclassed due to limitations in ES5 (for the transform-classes plugin). You can try to use babel-plugin-transform-builtin-extend based on Object.setPrototypeOf and Reflect.construct, but it also has some limitations.

ES5​

由于 Babel 假设你的代码将在 ES5 环境中运行,它使用的是 ES5 函数。所以如果你使用的环境对 ES5 的支持有限或不支持,例如低版本的 IE,那么使用 @babel/polyfill 就能为这些方法提供支持。

🌐 Since Babel assumes that your code will run in an ES5 environment it uses ES5 functions. So if you're using an environment that has limited or no support for ES5 such as lower versions of IE then using @babel/polyfill will add support for these methods.

IE 浏览器​

🌐 Internet Explorer

类(10 及以下)​

🌐 Classes (10 and below)

如果你是从一个类继承,那么静态属性会通过 proto 从它那里继承,这在大多数情况下都支持,但在一些非常旧的浏览器上可能会遇到问题。

🌐 If you're inheriting from a class then static properties are inherited from it via __proto__, this is widely supported but you may run into problems with much older browsers.

注意: __proto__ 不支持 IE ≤ 10,所以静态属性不会被继承。可以查看 protoToAssign 来寻找可能的解决方法。

对于拥有 super 的类,父类不会正确解析。你可以通过在 transform-classes 插件中启用 loose 选项来解决这个问题。

🌐 For classes that have supers, the super class won't resolve correctly. You can get around this by enabling the loose option in the transform-classes plugin.

getter/setter(8 及以下)​

🌐 Getters/setters (8 and below)

在 IE8 中,Object.defineProperty 只能用于 DOM 对象。这很不方便,因为它是设置 getter 和 setter 所必需的。因此,如果你打算支持 IE8 或更低版本,不建议使用 getter 和 setter。

🌐 In IE8 Object.defineProperty can only be used on DOM objects. This is unfortunate as it's required to set getters and setters. Due to this if you plan on supporting IE8 or below then the usage of getters and setters isn't recommended.

参考: MDN.

模块​

🌐 Modules

默认情况下,当使用 Babel 的模块时,会导出一个不可枚举的 __esModule 属性。这是通过使用 Object.defineProperty 实现的,而 Object.defineProperty 在 IE8 及以下版本中不受支持。解决方法是,在相应的模块插件中启用 loose 选项。

🌐 By default, when using modules with Babel a non-enumerable __esModule property is exported. This is done through the use of Object.defineProperty which is unsupported in IE8 and below. A workaround for this is to enable the loose option in your corresponding module plugin.