ES6的模块系统 es6的模块化

1. 模块化简介

     

       在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

      ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

      模块化是指将一个大的程序文件，拆分程许多小的文件，然后将小文件组合起来。类似于vue中的组件化。

    1.1 模块化的好处

• 防止命名冲突（不同模块的相同变量名，重复不冲突）
• 代码复用（把一个功能代码放在同一个模板里，向外暴露接口，可供给多个地方使用）
• 高维护性（如果多人对代码修改，不会产生过度冲突；代码和模块升级只需对某一个或某些模块进行升级）

    1.2 模块块化规范产品

• CommonJs  规范  =》 产品:   NodeJs、Browerify
• AMD  规范  =》 产品:    requireJS
• CMD  规范  =》 产品:    seaJS

    1.3 ES6模块块语法

      模块功能主要由两个命令构成：export 和 import 。在引入模块时script要写type="module"，不然会报错哦，Uncaught SyntaxError: Cannot use import statement outside a module。

• export 命令用于规定模板块对外接口
• import 命令用于输入其他模块的对外接口

// module.js
export let test = 'test'

export function add (a, b) {
  return a + b
}

// xxx.html  导出的module变量为object类型  script的type要写type="module"
// 引入moudle.js文件
import * as module from './模板化/module.js'
let testAdd = module.add(23, 56)
console.log(module, testAdd, typeof module)

      此例为分别暴露的方法，除此之外还有统一暴露和默认暴露。默认暴露需要调用module.default.add(12, 54)。

// 统一暴露
let test = 'test'
function add (a, b) {
  return a + b
}

export { test, add }

// 默认暴露
export default {
  test: 'test',
  add: function (a, b) {
    return a + b
  }
}

2. ES6 引入模块方式

• 通用引入方式

import * as module from './模板化/module.js'

• 解析赋值形式(如果不同模板的变量名重复，可以通过as进行设置变量别名)

import {add, test} from './模板化/module.js'
import {add as add2, test as test2} from './模板化/module2.js'
console.log(add, test)
console.log(add2, test2)

• 默认暴露的引入（一定要另起别名，方便区分，否则报错。输出m1，没有了default）

import {default as m1} from './模板化/module.js'

• 简便模式（只针对于默认暴露）

import m3Default from './模板化/module.js'

3. 浏览器中模块化的使用

// xxx.html 引入入口模块文件app.js
<script src="./js/app.js" type="module"> </script>

// app.js
import * as m1 from './js/module1.js'
import * as m2 from './js/module2.js'

// module1.js
.....

// module2.js
.....

4. 模块化在项目中的使用

      babel

    4.1 安装工具 babel-cli   babel-preset-env(预设包)   browserify(打包工具)

      过程：①初始化 ②安装

    4.2 通过 npx  babel  需转化文件的路径   -d   转化后存放的路径   参数

    4.3 打包 npx browserify 需要打包的文件目录  -o  打包后存放到的文件目录

      dist目录下会多一个bundle.js文件。打包后的文件格式。

5. 实例：通过npm 引入juqery包的流程

    5.1 在终端中通过npm i jquery命令安装jquery

    5.2 在js中引入jquery并使用（app.js中，通过import引入）

import $ from 'jquery'
$('body').css('background', 'pink')

重新安装工具（更新依赖）和打包

    5.4 在html中引入打包后的bundle.js文件，并打开网页看效果。

<script src="../dist/bundle.js" type="text/javascript" charset="utf-8"></script>

 

---