使用 babel 7 transform-runtime

Babel 是 JavaScript 编译器，用于将 ECMAScript 2015+ 版本的代码转换成向后兼容的 JavaScript 代码。Babel 7 中的 transform-runtime 插件可以帮助我们在编写高质量的代码的同时，减少代码的体积和冗余。

transform-runtime 的作用

在 Babel 中使用一些新的 ECMAScript 2015+ 特性时，如 Promise、Generator、Array.from 等新标准，在被转译成浏览器或者 Node.js 可以执行的代码时，会插入一些 polyfill 代码，以保证这些新特性在较低版本的浏览器或者 Node.js 上能够正常运行。

然而，在将这些代码插入到每个需要使用这个特性的地方时，这些代码就会产生冗余和重复，造成大量的代码体积浪费。此时，就可以使用 transform-runtime 插件，将多个重复代码抽离到单独的 helper 函数中，以减小代码体积。

使用 transform-runtime

在使用 transform-runtime 插件前，需要先安装 babel-runtime 和 @babel/plugin-transform-runtime 两个包，通过以下命令安装：

npm install --save-dev babel-runtime @babel/plugin-transform-runtime

然后，在 Babel 配置文件中，将 @babel/plugin-transform-runtime 添加到 plugins 中。示例代码如下所示：

// javascriptcn.com 代码示例
// .babelrc
{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

当使用一些诸如 Promise、Generator 等 ECMAScript 2015+ 特性时，会在编译时被编译成使用 babel-runtime 中的 helper 函数，而不是内联的 polyfill 代码。

注意事项

在使用 transform-runtime 时，需要注意以下几个方面：

1. transform-runtime 与 transform-async-to-generator、transform-regenerator 插件不能一起使用。如果需要使用 Generator 或者 async，应该只使用 transform-runtime。

2. transform-runtime 插件不会自动引入 babel-runtime，需要在项目中手动引入，否则会因为找不到 babel-runtime 报错。

3. transform-runtime 插件只能解决当前项目中需要的新功能的 polyfill 代码问题，对于第三方库的 polyfills 代码问题，需要通过其他手段解决，如 CDN、webpack 的 external 配置等。

总结

使用 transform-runtime 插件，能够帮我们减少冗余的代码，提高代码的可读性和维护性，以及减小项目的体积。但是需要注意，这只是解决自己项目中的 polyfill 代码问题，对于第三方库的 polyfills 代码问题，需要通过其他方式解决。

本文为大家介绍了在前端开发中使用 Babel 7 transform-runtime 插件的作用、使用方法以及需要注意的事项，希望能够对大家有所帮助。完整代码如下所示：

// javascriptcn.com 代码示例
// index.js
async function test() {
  await new Promise(resolve => {
    setTimeout(resolve, 1000);
  });
  console.log('done');
}

test();

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6542023c7d4982a6ebba665f