模块化

规范

• 浏览器模块化
  • AMD
  • CMD
• 服务端模块化
  • NODEjs
• ES6模块化

ES6模块化

• 安装babel

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm install --save @babel/polyfill

• 导出

// export default 只能用一次
export { firstName, lastName, year };
// 注意，导出的的变量为引用，实际上仍然可以受到原来模块的控制
// 如果使用export default 导出的就是值而非引用
export function multiply(x, y) {
  return x * y;
};

• 导入

import { stat, exists, readFile } from 'fs';
// 一些混用
import m1, {a as x,c} from './m1.js';
// 直接指向导入模块的代码
import './m2.js'
export a from "a.js"

语法要求不带 as 的默认值永远在最前

脚本与模块

• 脚本：是可以由浏览器或者 node 环境引入执行的
• 模块：只能由 JavaScript 代码用 import 引入执行

现代浏览器可以支持用 script 标签引入模块或者脚本，如果要引入模块，必须给 script 标签添加 type=“module”