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