今天說一下ES6的模塊化，使用babel進(jìn)行編譯。
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']]"
}

下載相應(yīng)的模塊

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

webpack -w運(yùn)行
ES6里面模塊化的使用方式

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

第一種書寫方式

mod.js代碼(一個(gè)一個(gè)導(dǎo)出)

export let a=12; //到處普通值
    export let b=5;
    exporrt let json={
        a,b
    };
    export let show=function(){//導(dǎo)出函數(shù)
        reutrn 'hello'
    }；
    export class Person{ //導(dǎo)出類(es6面向?qū)ο?
        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是別名，使用的時(shí)候只能用別名
    }

index.js代碼

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

第三種 default方式

default方式的優(yōu)點(diǎn)，import無(wú)需知道變量名，就可以直接使用