深入浅出webpack学习(12)--使用ES6语言

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了深入浅出webpack学习(12)--使用ES6语言脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

目前部分浏览器和Nodejs已经支持ES6,但由于它们对ES6所有的标准支持不全,这导致在开发中不敢全面的使用ES6.

通常我们需要把采用ES6编写的代码转换成目前已经支持良好的ES5代码,这包含2件事:

1. 把心的ES6语法转换为ES5
2. 给新的API注入polyfill, 例如使用新的fetch Api时注入对应的polyfill后才能让地段浏览器正常运行。

Babel

Babel可以方便的完成以上两件事情, Babel是一个JavaScript编译器,能将ES6代码转为ES5代码,让你使用最新的语言特性而不用担心兼容问题,并且可以通过插件机制根据求灵活的拓展。在babel执行编译的过程中,会从项目根目录下的.babelrc文件读取配置,其内容大致如下:

{
    "plugins" : [
        [
            "transform-runtime",
            {
                "polyfill": false
            }
        ]
    ],
    "PReset": [
        [
            "es2015",
            {
                "modules": false
            }
        ],
        "stage-2",
        "react"
    ]
}

Plugins

plugins告诉babel要用哪些插件,插件可以控制如何转换代码。

以上配置文件里的 transform-runtime对应的插件全面叫做babel-plugin-transform-runtime,即在前面加上了babel-plugin-,要让Babel正常运行,我们必须先安装他:

npm i -D babel-plugin-transform-runtime

babel-plugin-transform-runtime是babel官方提供的一个插件,作用是减少冗余代码。Babel在把ES6代码转换成ES5代码时通常需要一些ES5写的辅助函数完成新语法的实现,例如在在转换class extent语法时会在转换后的ES5代码里注入_extent辅助函数用于实现继承:

function _extent(target) {
  for (VAR i = 1; i < arguments.length; i++) {
    var source = arguments[i];
    for (var key in source) {
      if (Object.prototype.hasOwnProperty.call(source, key)) {
        target[key] = source[key];
      }
    }
  }
  return target;
}

这会导致每个使用了 class extent 语法的文件都被注入重复的_extent 辅助函数代码,babel-plugin-transform-runtime 的作用在于不把辅助函数内容注入到文件里,而是注入一条导入语句:

var _extent = require('babel-runtime/helpers/_extent');

这样能减小babel编译出来的代码的文件大小。

需要注意的是由于 babel-plugin-transform-runtime 注入了 require('babel-runtime/helpers/_extent') 语句到编译后的代码里,需要安装 babel-runtime 依赖到你的项目后,代码才能正常运行。 也就是说 babel-plugin-transform-runtime 和 babel-runtime 需要配套使用,使用了 babel-plugin-transform-runtime 后一定需要 babel-runtime。

Presets

presets属性告诉Babel要转换的码使用了哪些新的语法特性,一个Preset对一组新语法特性提供支持, 多个Presets可以叠加。 Presets其实是一组Plugins的集合,每一个Plugin完成一个新语法的转换工作。Presets是按照ECMAScript草案来组织的,通常可以分为以下三大类:

es2015 包含在2015里加入的新特性;
es2016 包含在2016里加入的新特性;
es2017 包含在2017里加入的新特性;
es2017 包含在2017里加入的新特性;
env 包含当前所有 @R_512_254@ 标准里的最新特性。

深入浅出webpack学习(12)--使用ES6语言

被社区提出来但还没被写入ECMAScript标准里特性,这其中又分为以下四种

stage0 只是一个美好激进的想法,有 Babel 插件实现了对这些特性的支持,但是不确定是否会被定为标准;
stage1 值得被纳入标准的特性;
stage2 该特性规范已经被起草,将会被纳入标准里;
stage3 该特性规范已经定稿,各大浏览器厂商和 Node.js 社区开始着手实现;
stage4 在接下来的一年将会加入到标准里去。

深入浅出webpack学习(12)--使用ES6语言

为了支持一些特定应用场景下的语法,和 ECMAScript 标准没有关系,例如 babel-preset-react 是为了支持 React 开发中的 JSX 语法。实际应用中,你需要根据项目源码所使用的语法去安装对应的 Plugins 或 Presets。

接入Babel

了解 Babel 后,下一步要知道何在 Webpack 中使用它。 由于 Babel 所做的事情是转换代码,所以应该通过 Loader 去接入 Babel,Webpack 配置如下:

module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        use: ['babel-loader'],
      },
    ]
  },
  // 输出 source-map 方便直接调试 ES6 源码
  devtool: 'source-map'
};

脚本宝典总结

以上是脚本宝典为你收集整理的深入浅出webpack学习(12)--使用ES6语言全部内容,希望文章能够帮你解决深入浅出webpack学习(12)--使用ES6语言所遇到的问题。

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

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