ES2015+学习笔记系列（九）—— ES6模块化

1、ES6模块化

模块化是将一个大的程序文件，拆分成许多小的文件,然后将小文件组合起来.

优点：

• 防止命名冲突
• 代码复用
• 高维护性

2、模块化规范产品

• CommonJS—>Node Browserify
• AMD —> requireJS
• CMD —> seaJS
• ES6规范 —> 浏览器端规范

3、ES6模块化语法

模块功能主要由两个命令构成：** export和import **

• export命令用于规定模块的对外接口
• import命令 用于输入其他模块提供的功能(注意：html中引入时要设置script标签的type属性为module)

3.1、export暴露方式

3.1.1、分别暴露

export let name1 = '分别暴露方式';//暴露一个变量
//暴露一个方法
export function exportFun1(){
    console.log('分别暴露方式函数');
}

3.1.2、统一暴露

let name1 = '分别暴露方式2';
function exportFun1(){
    console.log('分别暴露方式函数2');
}

export {name1,exportFun1}

3.1.3、默认暴露

默认暴露是键值对形式，暴露的属性方法在default对象中

export default {
  name1: "default暴露方式",
  exportFun1: function () {
    console.log("default暴露方式");
  },
};

3.2、引入模块

3.2.1、通用导入

 import * as m1 from './js/export1.js'//通用的引入方式

3.2.2、解构赋值形式

//分别导出的引入
import {name1,exportFun1} from './js/export1.js'//解构赋值方式

//统一导出的引入
import {name1 as name,exportFun1 as fun} from './js/export2.js'//设置别名解决命名冲突

//default导出的引入
import {default as m3} from './js/export3.js'

3.2.3、简便形式（只能针对默认暴露）

 import m4 from './js/export3.js'//简便形式，只适合default导出的

4、浏览器使用ES6模块化方式

4.1、直接导入方式

4.2、app.js方式

在app.js文件引入各个模块文件，然后在html文件中引入app.js文件

app.js
  import * as m1 from './export1.js'//通用的引入方式
  import { name1 as name, exportFun1 as fun } from './export2.js'
  import { default as m3 } from './export3.js'
  import m4 from './export3.js'//简便形式，只适合default导出的

  console.log(m1);
  console.log(name);
  console.log(m3);
  console.log(m4);

4.3、Babel方式

• 用以转换ES6语法为ES5语法
• 并非所有的浏览器支持ES6语法
• ES6模块化还不能对npm安装的模块进行导入

步骤：

1. 安装工具babel-cli（babel命令行工具）、 babel-preset-env(预设包，把最新的ES特性转换为ES5)、 browserify(webpack)

2. 语法转换 npx babel 源文件目录 -d dist/js --preset=babel-preset-env

   • ES6语法转换为CommonJS模块规范化语法
   • 浏览器不识别require语法

3. 打包 npx browserify dist/js -o dist/bundle.js