今天說一下ES6的模塊化，使用babel進行編譯。
babel+webpack配置:

    webpack.config.js的代碼如下:
    module.exports={
          entry:'./index.js',//入口文件
          output:{
              filename:'build.js'//出口
          }，
     module:{
    loaders：[{
        test:/\.js$/,
        loaders:'babel-loader',
        exclude:/node_modules/   //排除那些目錄
        }]
    }
};

.babelrc文件的配置

{
        "presets:[['es2015']]"
}

下載相應的模塊

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

webpack -w運行
ES6里面模塊化的使用方式

模塊: 定義(導出) 和 引入(導入)
以下例子,導出模塊放在 mod.js里面
以下例子,導入模塊放在 index.js 里面

第一種書寫方式

mod.js代碼(一個一個導出)

export let a=12; //到處普通值
    export let b=5;
    exporrt let json={
        a,b
    };
    export let show=function(){//導出函數
        reutrn 'hello'
    }；
    export class Person{ //導出類(es6面向對象)
        constructor(){
            this.name='123';
        }
        showName(){
            reutrn this.name;
        }
    }

index.js代碼

import {
        a,b,json,show,Person
    } from './mod'
    console,log(a,b,json,show,Person);

第二種書寫方式

mod.js代碼

let [a,b,c]=[12,5,1];
    export{
        a,b,c as  cc//as是別名，使用的時候只能用別名
    }

index.js代碼

import{
        a,b,cc //cc是導出的，as別名
    } from './mod'
    console.log(a,b,cc);

第三種 default方式

default方式的優點，import無需知道變量名，就可以直接使用