ES6--模块化

ES6 模块化

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

模块化的好处

模块化的优势有以下几点：

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

模块化规范产品

ES6 之前的模块化规范有：

• CommonJS => NodeJS、Browserify
• AMD => requireJS
• CMD => seaJS

ES6 模块化语法

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

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

模块导出数据语法

1. 单个导出

   // 单个导出
   export let uname = 'Rick';
   export let sayHello = function () {
       console.log('Hi, bro!');
   }Copy to clipboardErrorCopied
   

2. 合并导出

   let uname = 'Rick';
   let sayHello = function () {
       console.log('Hi, bro!');
   }
   // 合并导出
   export { uname, sayHello };Copy to clipboardErrorCopied
   

3. 默认导出

   // 默认导出
   export default {
       uname: 'Rick',
       sayHello: function () {
           console.log('Hi, bro!');
       }
   }Copy to clipboardErrorCopied
   

模块导入数据语法

1. 通用导入方式

   import * as m1 from './js/m1.js';
   import * as m2 from './js/m2.js';
   import * as m3 from './js/m3.js';Copy to clipboardErrorCopied
   

2. 解构赋值导入

   import { uname, sayHello } from './js/m1.js';
   // 有重复名可以设置别名
   import { uname as uname2, sayHello as sayHello2 } from './js/m2.js';
   console.log(uname);
   // 配合默认导出
   import {default as m3} from "./src/js/m3.js";Copy to clipboardErrorCopied
   

3. 简便方式导入，针对默认暴露

   import m3 from "./src/js/m3.js";Copy to clipboardErrorCopied
   

ES6 使用模块化方式二

将文件导入都写进一个 app.js 文件中，然后在里面写入要导入的模块。app.js 中的内容如下：

import * as m1 from './js/m1.js';
import * as m2 from './js/m2.js';
import * as m3 from './js/m3.js';

console.log(m1);
console.log(m2);
console.log(m3);Copy to clipboardErrorCopied

在 index.html 中引入 app.js 文件内容：

<script src="./app.js" type="module"></script>Copy to clipboardErrorCopied

使用 babel 对模块化代码转换

有的浏览器不支持 ES6 语法，这时候就需要使用 babel 来将其转换成 ES5 等价语法。

1. 安装工具

   npm i babel-cli babel-preset-env browserify(webpack) -DCopy to clipboardErrorCopied
   

2. 编译

   npx babel src/js -d dist/js --presets=babel-preset-envCopy to clipboardErrorCopied
   

3. 打包

   npx browserify dist/js/app.js -o dist/bundle.jsCopy to clipboardErrorCopied
   

ES6 模块化引入 npm 安装的包

npm install jqueryCopy to clipboardErrorCopied

再通过 import 导入即可。