ES6環境搭建

參考連結

環境需求：
1. Node
2. cnpm (國內可以選擇cnpm，淘寶映象)
3. webpack
4. babel-loader (轉碼器)

建立工程目錄的結構如下：

目錄結構說明：
study-es6: 專案名
dist/js：存放打包後的檔案；
src：開發環境訪問的目錄；
src/main.js：我們編寫的es6程式碼；
index.html：訪問的頁面（根目錄下）
webpack.config.js：webpack配置檔案；

 1. cnpm install 
 2. cnpm install webpack --save-dev ( 安裝webpack )
 3. cnpm install babel-loader babel-core babel-preset-es2015 webpack --save-dev  ( 安裝轉碼器 )  
 

配置檔案

webpack.config.js配置：

// webpack2 需要引入path 使用絕對路徑
const path = require('path')

module.exports = {

//  入口檔案 
    entry: './src/main.js',

//  輸出檔案
    output: {

        //  輸出的檔名字
        filename: 'bulid.js',

        // 輸出的檔案地址  path對應一個絕對路徑，此路徑是你希望一次性打包的目錄。
        path: __dirname+'/src/dist/'
    },

    //模組
 

    module:{

    // 載入器
        rules:[
            {
                test:/\.js$/, //匹配.js檔案
                //排除也就是不轉換node_modules下面的.js檔案
                exclude: /(node_modules|bower_components)/,
        //載入器  webpack2需要loader寫完整 不能寫babel 要寫 bable-loader
                use:[{loader:"babel-loader"}]
            }
        ]
    }
}
 

未加註釋：

const path = require('path')

module.exports = {
    entry: './es6-01/src/main.js',
    output: {
        filename: 'bulid.js',
        path: __dirname+'/es6-01/dist/'
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude: /(node_modules|bower_components)/,
                use:[{loader:"babel-loader"}]
            }
        ]
    }
}

package.json檔案配置：

這是主要就是命令；使用起來方便：
dev代表你可以在命令列輸入：
cnpm run dev
（後面的–colors是彩色列印，，請問一下其他的選項引數官網怎麼找，我找了半天。。。）

你的babel-laoder也要寫入package.json檔案中：

然後就執行吧