關於webpack，babel，以及es6和commonJS之間的聯系（轉）

add by zhj: babel是將es6轉為es5，而webpack從名字也能看出來，是一個打包工具，根據文件之間的依賴關系，將文件進行打包

原文：https://blog.csdn.net/a250758092/article/details/78543440

在這里理清一下以上幾個概念以及他們之間的關系。

現在的瀏覽器很多都不支持es6的語法，或者僅僅是部分支持，比如你用.360瀏覽器，你會發現它支持let卻不支持箭頭函數等。

babel就承擔了“翻譯”的角色，把es6的寫法轉換成es5的寫法。 
但是有些人可能在一個項目中單獨安裝完babel，並成功生成了新的文件后，發現導入這個文件到瀏覽器中卻報錯了。其中很有可能被誤導的是 import這個關鍵詞。

實際上babel轉換后的代碼是遵循commonJS規范的，而這個規范，瀏覽器並不能識別。因此導入到瀏覽器中會報錯，而nodeJS是commonJS的實現者，所以在babel轉換后的代碼是可以在node中運行的。

為了將babel生成的commonJS規范的es5寫法能夠在瀏覽器上直接運行，我們就借住了webpack這個打包工具來完成，因為webpack本身也是遵循commonJS這個規范的，從它的配置文件webpack.config.js中就可以看出來

//module.exports是commonJS的接口輸出規范，es6的規范是export
module.exports = {
    entry: path.join(__dirname, 'index.js'),
    output: {
        path: path.join(__dirname, 'outs'),
        filename: 'index.js'
    },
};

es6和commonJS的關系。

在es6標准出來之前，大家都是commonJS或者AMD規范來模塊化。而es6並沒有沿用commonJS的東西，所以他們之間並沒有什么必要的聯系。在這里只談es6和commonJS的 導入和輸出的區別，其他深入的請自行了解

在commonJS中引入文件和輸出接口分別為

require('./a');//引入
//對外接口
module.exports={
a:xxx,
b:function(){}
}

而es6的寫法則是

//引入
import {a,b,c} from './a';

//輸出
export {a,b,c}

所以總會有人把es6的export和commonJS的module.exports拿來做比較，他們是完全不同的東西。至於在網上看到的代碼，有一些用export有一些用module.exports區別只是在於他們有沒有用es6的規范來寫，完整的流程是 es6->es5(commonJS規范)->瀏覽器可執行代碼。 重點只在於他們是直接用es5寫還是用es6寫，用es6的話就多了一個轉換的步驟

那么我們應該如何利用webpack完成一整個步驟呢？即用es6寫法直接生成瀏覽器可識別的代碼，而不用單獨用babel指令生成代碼再轉換。webpack為我們提供了一系列的方案。

• 首先我們創建一個空白項目
• 進入項目，並安裝以下各個依賴

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

自從babel升級6.x版本后就分成了兩個插件，一個是babel-core【終端運行】，(如果是node請安裝babel-cli )，一個是babel-preset-es2015

安裝完上述內容之后，需要設置一個.babelrc的文件放在根目錄下，內容為

{
  "presets": ["es2015"]
}

並且在webpack.config.js中配置babel-loader

module.exports = {
    entry: "./js/main.js",
    output:{
        filename: 'bundle.js'

    },
    module: {
        loaders: [{
            test: /\.js$/,
            loader: "babel-loader"

        }]

    }
}

配置完成后，就可以直接在JS文件中使用es6的語法，然后通過webpack命令打包生成，即可