ES6的模塊化，目前為止(2017-2-24)瀏覽器兼容還不是太好，需要使用babel進行編譯

babel+webpack配置:

webpack.config.js的代碼如下:

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

.babelrc文件的配置

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

下載相應的模塊

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

webpack -w運行

ES6里面模塊化的使用方式

模塊: 定義(導出) 和 引入(導入)

以下例子,導出模塊放在 mod.js里面

以下例子,導入模塊放在 index.js 里面

1. 第一種書寫方式

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

   export let a = 12; //導出普通值
   export let b = 5;
   export let json = { //導出json
    a,
    b
   };
   export let show = function() { //導出函數
    return 'welcome'
   };
   export class Person { //導出類
    constructor() {
        this.name = '123';
    }
    showName() {
        return this.name;
    }
   }
   

   index.js代碼

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

2. 第二種書寫方式

   mod.js代碼

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

   index.js代碼

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

3. 第三種 default方式

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

   mod.js的代碼

   export default function() {
    console.log('welcome to ES6 modules')
   }
   

   index.js的代碼

   import aa from './mod'
   aa();
   
   //或者
   //import aa as cc from './mod'  //as用來起別名
   //cc()
   

   小總結: 導出模塊如果用default了，引入的時候直接用，若沒有用default，引入的時候可以用{}的形式

   有了default的方便之處,以后:

   import $ from './jquery-3.1.1'
   
   //使用
   $(function(){
     $('body').css({
       background:'#ccc'
     })
   })
   

   像這樣引入模塊就顯的非常省事了。

4. 總結export和import的用法

   • export的用法

     //1.
     export let a=12;
     export let b=5;
     //2.
     let a=12;
     let b=5;
     export {a,b}
     //3.
     let a=12;
     let b=5;
     export {a as aa, b as bb}
     //4.
     export default {
       a:12,
       b:5
     }
     //5.
     export let fn1=function(){}
     export let fn2=function(){}
     

   • import的用法

     //1.
     import {a,b} from './mod'
     //2.
     import {a as aa, b as bb} from './mod'
     //3.
     import {aa,bb} from './mod'
     //4.
     import json from './mod'
     //5.
     import * as fn from './mod'  //* 用來加載所有模塊
     

     手邊有電腦，就稍微跑一遍試試吧，如果沒有，就暫時記住語法規則嘍!