webpack之react开发前准备

今天抽出空来,翻了翻webpack之react的书籍,看到刚出的es6语法,貌似是简单了很多,可是兼容性确实不容乐观,若是实在要用那也不是不能够的,首先就跟随我来看下这个插件吧:

Babel:这个插件是一种多用途的JavaScript编译器,他能把最新的js编译成当下浏览器能够执行的版本,因此这就让咱们使用es6语法成为了可能.实现安装Babel CLI,这是一个能够在命令行中使用Babel编译的方法.

npm install babel -cli -g

该命令是告诉命令行来全局安装babel cli插件的,接下来就能够轻松快乐的编译ES6代码了:

//es6.js
let numbers = [1,2,3];
let doubleNumbers = numbers.map((number)=>number*2);
console.log(doubleNumbers);

而后咱们能够使用命令去编译该段js代码

babel es6.js -o compiled.js

代开compiled.js你会发现代码并未有任何的改变,只是单纯的拷贝复制了,那是由于咱们尚未配置babel,那么接下来咱们就一同来配置一下babel,首先建立一个.babelre的配置文件,以下:

//.babelrc
{
    "presets":[].
    "plugins":[]
}

接下来安装一个预设,就能够完美的把es6语法转为es5语法了

npm install babel-preset-es2015 --save-dev

而后咱们修改对应的配置文件

//.babelrc
{
    "presets":['es2015'],
    "plugins":[]
}

如今终于配置完成了,你会发现再次运行以上命令es6代码被成功编译了.

"use strict";

var number = [1, 2, 3];
var doubleNumber = number.map(function (number) {
  return number * 2;
});

还有在即将发布的ES7中的展开操做符"..."(如下简称...),在这里要用一个单独的插件来实现此功能,具体步骤以下:

npm install babel-plugin-transform-object-rest-spread --save-dev

 

 插件安装完成后,咱们来用...写一段代码:

let mike = {name: 'mike',age:40};
mike = {...mike,sex:'male'};
console.log(mike);

 还运行刚才的-o命令,编译后的文件为:

var _extends = Object.assign || function (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; };
var mike = { name: 'mike', age: 40 };
mike = _extends({}, mike, { sex: 'male' });
console.log(mike);

能够看出这个插件添加了一个_extends方法来完成这个功能.

因此对于ES6来讲,绝对多数浏览器仍是不支持的 可是随着babel插件的诞生,在现代项目中,能够尽情的使用ES6了.