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了.