ES6模塊化-使用export/import

Node.js 中通過 babel 體驗 ES6 模塊化

ES6 模塊化的基本語法

1. 默認導出 與 默認導入

• 默認導出語法 export default 默認導出的成員
• 默認導入語法 import 接收名稱 from ‘模塊標識符’

2. 按需導出 與 按需導入

• 按需導出語法 export let s1 = 10
• 按需導入語法 import { s1 } from ‘模塊標識符’

3. 導出對象 與 通過導出對象同時按需導入與一次性導入

• 使用導出對象的方式使按需導入和默認導入同時使用
  export{ a, b, s2, show, }
• 導出對象、實現按需導入
  import {show} from ‘./m1.js’
• 導出對象、實現一次性導入
  import * as m1 from ‘./m1.js’

默認導出
export default{ a, b, show,  }
默認導入
import m1 from './m1.js'
按需導出
export let s1 = 10
按需導入
import { s1, s2 as ss2, say } from './m1.js'
使用導出對象的方式使按需導入和默認導入同時使用
 export{
    a,
    b,
    s2,
    show,
 }
導出對象、實現按需導入
import {show} from './m1.js'
//輸出導入結果
//console.log(show);
導出對象、實現一次性導入
import * as m1 from './m1.js'
//輸出導入結果
//console.log(m1);

1.安裝babel-cli和babel-preset-env

npm install babel-cli  -D
npm install babel-preset-env -D

2.使用方式

//index.js
// 默認導入
// import m1 from './m1'

// 默認導入與按需導入同時存在
//import m1,{s2} from './m1.js'
//輸出導入結果
// console.log(m1);
// console.log(s2);

// 導出對象、實現按需導入
//import {show} from './m1.js'
//輸出導入結果
//console.log(show);


// 導出對象、實現一次性導入
//import * as m1 from './m1.js'
//輸出導入結果
//console.log(m1);


//直接導入並且執行執行模塊代碼
import './m2.js'
//console.log(m2)


//m1.js
let a=1;
let b=2;
let c=39;

function show() { 
    console.log('11111');   
 }
 //按需導出
 let s2=110;
 //默認導出
//  export default{
//      a,
//      b,
//      show,
//  }
 //使用對象的方式使按需導入和默認導入同時使用
 export{
    a,
    b,
    s2,
    show,
 }

3.啓動

啓用命令由原來的node index.js改爲下面的命令

babel-node --presets env index.js

命令比原來的node長了不少，可以在package.json添加scripts語句優化命令

"scripts": {
    "start": "babel-node --presets env index.js"
},

優化後的啓用命令

npm start