Webpack之恋(4)-实战ES6

楔子

ECMAScript 6(以下简称ES6)是JavaScript的新标准,具有许多新的特性如Promise、类以及模块等,目前在社区吵得很火。但毕竟标准的实现需要时间,因此目前流行的做法是使用ES6标准来编码,通过Babel等工具来做适当的转换。而Webpack为你准备好了bable-loader。
es6

ES6

因为ES6是在2015年发布的,因此通常也称为ECMAScript 2015。目前国内较好的入门教程是阮一峰的ECMAScript 6入门,既有电子书,也有纸版书。实际上ECMAScript标准在NodeJs上得到比较早的实现,毕竟是服务器端,而且不像浏览器厂家各自为政。为了在浏览器的兼容就不得不介绍Babel了。

Babel

Babel是目前最知名的转码器,可以转换成ES5,让浏览器能够识别。Babel内置了多种转换规则,如es2015、es2017、react等。如试用ES6的新关键字let

// test.js
let str = "hello word!";

为了在命令行使用Babel,我们需要安装babel-cli,这里为了方便我全局安装

npm install babel-cli -g

按需安装使用的转码规则,由于使用了ES6,我安装

npm install babel-preset-es2015

转码

$ babel test.js --presets=es2015
"use strict";

var str = "hello word!";

可以看到已经把let转换成了var,当然这里只是做个简单的示例,为下面的webpack做个铺垫,babel的功能还有很多,具体可参考Babel官网

Webpack

现在使用webpack来处理ES6,webpack.config.js内容

// webpack.config.js
const path = require('path');
module.exports = {
  entry: {
     index:'./src/test.js'
  },
  output: {
     path: path.resolve(__dirname, 'app/assets/js'),
     filename: '[name].js'
  },
  module: {
    rules: [{
      test: /\.js$/,
use: [{
loader: 'babel-loader',
options: {
presets: 'es2015'
}
}]
    }]
  }
};

安装相关类库

npm install babel-core babel-loader babel-preset-es2015

总结

有了webpack以及丰富的loader和plugin,给我们带来无限可能。现在你就可以耍耍ES6了,不用在担心由于浏览器的兼容性而无用武之地。早点熟悉新标准,就不会输在起跑线上了。

翟前锋 wechat
欢迎订阅我的微信公众号:zhaiqianfeng!