前端工程化-模块化

.ES6模块化

ES6模块化规范中定义： ​

1).每一个js文件都是独立的模块

​2).导入模块成员使用import关键字 ​

3).暴露模块成员使用export关键字

小结：推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.

设置默认导入/导出

A.默认导出

export default { ​ 成员A, ​ 成员B, ​ ....... ​ },如下： ​ 

let num = 100; ​ export default{ ​ num ​ }

B.默认导入

import 接收名称 from "模块标识符"，如下： ​ import test from "./test.js"

注意：在一个模块中，只允许使用export default向外默认暴露一次成员，千万不要写多个export default。 如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象

设置按需导入/导出

(1)按需导出

export let num = 998; ​ export let myName = "jack"; ​ export function fn = function(){ console.log("fn") }

(2).按需导入

import { num,fn as printFn ,myName } from "./test.js" ​ //同时导入默认导出的成员以及按需导入的成员 ​ import test,{ num,fn as printFn ,myName } from "./test.js" 

注意：一个模块中既可以按需导入也可以默认导入，一个模块中既可以按需导出也可以默认导出

C.直接导入并执行代码

import "./test2.js";