如何用babel将ES6转换为指定的版本的ES代码

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了如何用babel将ES6转换为指定的版本的ES代码脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

由于新版本的ECMASscript的强大特性,使我们写js代码更加得心应手,例如:calss,letfor...of,promise等等,但可惜的是这些js新特新只被最新版本的浏览器支持,那么指定范围的低版本的浏览器的支持就需要一个专门的工具,babel就是这样的一块前端工具。

但是babel系列的插件现在越来越多,对于初次接触使用它的人来说需要花费不少的时间,尤其是讨厌英文的人。

babel-6已经放弃原来的babel包,取而代之的是各种转换插件,刚开始,我也很纳闷,为什么要分这么多插件包呢,原先的一个不好吗?随着使用我么发现,这些插件的职责分明,避免了‘一刀切’的问题,不管你需不需要都给你编译。

@H_512_7@babel-loader

这个包是由babel团队开发的loader,用来告诉webpack我想要对我的js代码进行兼容性编译。

babel-loader 只是起到一个通知者的角色,通知babel你需要干活了,在webpack的module中使用代码如下:

module: {
  rules: [
    {
      test: /.js$/,
      exclude: /(node_modules)/, // 不对node_modules目录下的文件进行编译,可以提升webpack打包速度,其他loader也有这个配置
      use: {
        loader: 'babel-loader',
        // loader: 'babel-loader?cacheDirectory', // 使用缓存目录它可以进一步提升webpack的编译速度
        options: { // 这个配置项我们一般单独拿出来,创建一个‘.babelrc’文件来单独存放配置项
          PResets: ['@babel/preset-env'],// babel预设
          plugin: ['@babel/plugin-proposal-object-rest-spread'] // 所需要使用的插件
        }
      }
    }
  ]
}

babel-core

如果说 babel-loader 是告诉webpack我要对js文件进行代码兼容性编译,那么,webpack接下来就是要找babel,而bable的入口就是 babel-core ,只有通过它,webpack才能使用各种babel的api(前提是你安装了相关的api)。

babel-preset-es 和 babel-preset-stage-

babel-preset-es2015babel-preset-es2016babel-preset-es2017等等傻傻的分也分不清楚。

这些预设将支持ES6新语法的兼容性编译。

将代码转化为 ES3

babel-preset-es3

将代码转化为 ES5

'babel-preset-es2015' ,
'babel-preset-stage-0' ,
'babel-preset-stage-1' ,
'babel-preset-stage-2' ,
'babel-preset-stage-3' ,

将代码转化为 ES6

'babel-preset-es2016' 将ES2016转化成ES6'babel-preset-es2017' 将ES2017转化成ES6

预设只能将ES6语法编译为你指定的ES版本语法,例如:箭头函数,但是像 Array.From 这样的API呢他无能为力。那么,怎么办呢,我们下面来介绍几种解决方案

处理ES6 API

babel-polyfill

babel预设可以编译几乎所有的JavaScript新语法,但是对于API却不能解决,解决这个问题babel用的是 babel-polyfill (它有core-js和regenerator两部分构成)。

执行安装命令:

npm install --save-dev babel-polyfill

babel-polyfill 有三种引入方法。

1.那个模块需要就在那个模块引入,

require('babel-polyfill');

2.全局引入方法1,在项目的入口文件引入,如果项目有多个入口,则在每个需要的入口分别加入。

require('babel-polyfill');

3.全局引入方法2,可以在项目的 webpack.config.js 的入口配置项中引入。

entry: {
    app: ['babel-polyfill', './main.js']
},

这是第一种解决方案用来将ES6代码编译为es5。但是这种方案,增加了一些不必要的代码,webpack打包后的文件比较大,使用它还有一个问题就是容易造成全局污染。。

而刚刚好babel提供了babel-runtime。babel-plyfill我们以前经常用,而babel-runtime,则是现在常用的。

babel-runtime

babel-runtime不会污染全局对象。如:当前的运行环境如果不支持Symbol,可以访问 babel-runtime/core-js/symbol 这里重新定义了symbol,此外还有Promise,Set 和 Map 等。

babel-runtime 官方建议用在生产环境,而开发环境使用 babel-plugin-transform-runtime

babel-plugin-transform-runtime

引用自:https://github.com/babel/babel-loader

babel uses very small helPErs for common functions such as _extend. By default this will be added to every file that requires IT.

You can instead require the babel runtime as a separate module to avoid the duplication.

这段话的意思是说:

babel会使用一些非常小的辅助(helper)函数作为通用函数,例如:_extend 。默认情况下,这类函数将被添加到每个需要它的文件中。这时你可以使用babel runtime作为单独的模块来避免重复。

module: {
  rules: [
    {
      test: /.js$/,
      exclude: /(node_modules)/, // 不对node_modules目录下的文件进行编译,可以提升webpack打包速度,其他loader也有这个配置
      use: {
        loader: 'babel-loader',
        // loader: 'babel-loader?cacheDirectory', // 使用缓存目录它可以进一步提升webpack的编译速度
        options: { // 这个配置项我们一般单独拿出来,创建一个‘.babelrc’文件来单独存放配置项
          presets: ['@babel/preset-env'],// babel预设
          plugin: ['@babel/transform-runtime']
        }
      }
    }
  ]
}

babel-plugin-transform-runtime 包含一个内置的polyfill(它包含一个自定义的regenerator运行时和core.js),所以,在webpack中使用 ProvidePluginshimming 方法定义 @L_406_20@ 将不起作用。

env preset

babel-preset-env 允许你指定一个代码执行环境,并且只编译该环境缺少的特性。

而非 babel-pre-env 预设存在的问题在于它们往往做得太多。例如,大多数现代浏览器都支持ES6生成器。如果您使用 babel-preset-es2015 这些预设,ES6生成器函数将始终被转换为复杂的ES5代码。

.babelrc 配置文件如下:

"presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["last 2 versions", "ie >= 7"]
        }
      }
    ]
  ]

支持最近两个版本的浏览器和IE7以上的浏览器。

其它babel插件

babel-plugin-tranform-classes // 解决ES6类(class)的兼容性

使用实践

babel-corebabel-preset-es2015babel-polyfill

首先,.babelrc 代码如下:

{
    "presets": ["es2015"]
}

然后,修改 webpack.config.js 代码如下:

entry: {
    app: ['babel-polyfill', './main.js']
},

babel-polyfill 还有其他的引入方式

babel-corebabel-preset-es2015babel-transform-runtime

仅需要修改 .babelrc 代码如下:

{
    "presets": ["es2015"],
    "plugins": ["transform-runtime"]
}

babel-corebabel-preset-es2015babel-transform-runtime, babel-preset-stage-*,

使用 babel-preset-stage-* ,我们就是想使用一些更新的js特性,以 babel-preset-stage-2 为例

仅需要修改 .babelrc 代码如下:

{
    "presets": ["es2015", "es-stage-2"],
    "plugins": ["transform-runtime"]
}

babel-corebabel-preset-es2015babel-transform-runtime, babel-preset-env

给我们的项目指定支持的浏览器和运行环境。

仅需要修改 .babelrc 代码如下:

{
    "presets": ["es2015"],
    "plugins": ["transform-runtime"].
    "env": {
        "targets": {
            "browsers": ["last 2 versions", "safari >= 7"], // 浏览器
            "node": "6.10" // node 
        }
    }
}

你可能发现这里没有介绍 babel-cli, babel-register 和babel插件,解释一下,这里主要是为了webpack的使用进行的介绍,如果有很多人需要的话可以在做介绍。

下一篇babel的文章我会介绍,如何在webpack中使用 babel-eslint

参考源代码

参考资料:

babel-preset-env: a preset that configures Babel for you
babel-preset-env from npmjs.com
babel中文参考手册

其它关于webpack的系列文章webpack-learning

脚本宝典总结

以上是脚本宝典为你收集整理的如何用babel将ES6转换为指定的版本的ES代码全部内容,希望文章能够帮你解决如何用babel将ES6转换为指定的版本的ES代码所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。