(15/24) 爲webpack增長babel支持

Babel是什麼？ Babel是一個編譯JavaScript的平臺，它的強大之處表如今能夠經過編譯達到如下目的：

使用下一代的javaScript代碼(ES6,ES7….)，即便這些標準目前並未被當前的瀏覽器徹底支持。

使用基於JavaScript進行了擴展的語言，好比React的JSX。

#1.如何讓webpack支持babel呢？

Babel實際上是幾個模塊化的包，其核心功能位於稱爲babel-core的npm包中，webpack能夠把其不一樣的包整合在一塊兒使用，對於每個你須要的功能或拓展，你

都須要安裝單獨的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

##1.1.安裝 一次性安裝這些依賴包（也能夠單獨安裝）,此處使用cnpm安裝（也可使用npm安裝）：

cnpm  install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

--save-dev：表示將模塊安裝到項目目錄下，並在package文件的devDependencies節點寫入依賴。

此處注意版本兼容問題，若出現版本兼容問題，可先刪除node_modules而後安裝我此處使用的版本（刪除node_modules後直接修改package.json中版本，而後使用npm install 便可（或cnpm install））：

cnpm  install --save-dev babel-core@6.26.3 babel-loader@7.1.4 babel-preset-es2015@6.24.1 babel-preset-react@6.24.1

##1.2配置Babel 在webpack.fonfig.js中進行配置：

{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                "es2015","react"
            ]
        }
    },
    exclude:/node_modules/  //排除node_modules下面的包
}

##1.3 修改entry.js中的js代碼：

{
    let test= 'Hello Webpack'
    document.getElementById('title').innerHTML=test; 
}

##1.4 打包 上面的代碼使用了ES6的let聲明方法。若是不使用Babel來進行轉換，咱們打包出來的js代碼沒有做兼容處理，使用了Babel轉換的代碼是進行處理過的，轉成了

es5的語法。

使用webpack命令進行打包

webpack

經過上述的配置，webpack其實已經支持babel，可是不是最好的選擇，還能夠進行優化。

#2. .babelrc配置 雖然Babel能夠直接在webpack.config.js中進行配置，可是考慮到babel具備很是多的配置選項，若是都寫在webapck.config.js中會很是的雍長不利於閱讀，

因此咱們常常把配置寫在.babelrc文件裏。

##2.1 新建.babelrc 在項目根目錄新建.babelrc文件，並把配置寫到文件裏。 .babelrc:

{
    "presets":["react","es2015"]
}

此時的webpack.config.js文件裏loader配置變爲：

{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
    },
    exclude:/node_modules/
}

此時咱們打包，效果與上面的一致。

經過.babelrc的配置，使babel相關配置與webpack.config.js分離開來，便於閱讀與維護。但此時.babelrc配置文件裏的相關配置信息有點落伍了，下面來學學新一

代的babel-preset。

#3.ENV的使用

如今網絡上已經不流行babel-preset-es2015，如今官方推薦使用的是babel-preset-env,爲了避免落伍咱們就來學學ENV的相關知識：

##3.1 插件下載（也可使用cnpm）

npm  install --save-dev babel-preset-env

##3.2 修改.babelrc裏的配置文件

{
    "presets":["react","env"]
}

##3.3 打包

此時咱們再使用webpack命令進行打包，最終的打包結果也上述都一致。

對於在React中Babel的使用，如何解析JSX,會在後續繼續學習，這裏就算是先過過眼把。

有什麼問題，歡迎關注並留言！！