注意事项
Polyfills
为了使某些功能起作用,它们需要某些 polyfill。你可以通过使用完整的 polyfill(例如 core-js/actual
或(如果你想使用 <script>
标签加载它)core-js-bundle
)来满足所有 Babel 功能要求。
¥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 Of | Symbol , prototype[Symbol.iterator] |
传播 | Array.from |
如果你将生成器或异步函数编译到 ES5,并且你使用的是早于 7.18.0
的 @babel/core
或 @babel/plugin-transform-regenerator
版本,则还必须加载 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
由于 ES5 的限制(对于 transform-classes 插件),Date
、Array
、DOM
等内置类无法正确子类化。你可以尝试在 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.
注意:IE ≤ 10 不支持 __proto__
,因此不会继承静态属性。有关可能的解决方法,请参阅 protoToAssign。
¥NOTE: __proto__
is not supported on IE ≤ 10 so static properties
will not be inherited. See the
protoToAssign for a possible work
around.
对于具有 super
的类,超类将无法正确解析。你可以通过启用 transform-classes 插件中的 loose
选项来解决此问题。
¥For classes that have super
s, 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。
¥Reference: MDN.
模块
¥Modules
默认情况下,当使用带有 Babel 的模块时,会导出一个不可枚举的 __esModule
属性。这是通过使用 IE8 及更低版本不支持的 Object.defineProperty
来完成的。解决方法是在相应的模块插件中启用 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.