關於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命令打包生成，便可