1. 什么是模块化

把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以以来别的模块

2. 模块化的好处

1. 防止命名冲突
2. 代码复用，提高效率
3. 高维护性

3. 模块化规范产品

3.1 浏览器端模块化规范

1. AMD Require.js
2. CMD Sea.js

3.2 服务器端模块化规范

3. CommonJS node.js/Browserify 模块分为：单文件模块 与 包 模块成员导出：module.exports 和 exports 模块成员导入：require('模块标识符')

3.3 大一统的模块化规范——ES6模块化

4. es6 之前那些社区提出的标准化，存在一定的差异性与局限性，并不是浏览器与服务器通用的模块化标准 在ES6语法规范中，在语言层面上定义了ES6模块化规范，是浏览器端与服务器端通用的模块化开发规范

• 每个js文件都是一个独立的模块
• 导入模块成员 使用 import 关键字
• 暴露模块成员 使用 export 关键字

4. ES6模块化基本使用

4.1 export 模块暴露数据

4.1.1 分别暴露 (按需暴露)

m1.js

export let school = 'YKyk';
export function teach() {
	console.log('teach');
}

4.1.2 统一暴露

m2.js

let school = 'YKyk';
function find() {
	console.log('find');
}
export {school, teach}

4.1.3 默认暴露

m3.js

export default {
	school: 'YKyk',
	change: function(){
		console.log('change');
	}
}

4.2 import引入模块

4.2.1 通用的引入

import * as m1 from "./src/js/m1.js"
m1.teach();
import * as m3 from "./src/js/m3.js"
m3.default.change();

4.2.2 解构赋值形式（按需引入）

import { school, teach } from "./src/js/m1.js"
teach();
import { school as yk, find } from "./src/js/m2.js" // 起别名
console.log(yk);
import { default as m3 } from "./src/js/m3.js"
m3.change();

4.2.3 针对默认暴露的简便导入形式

import m3 from "./src/js/m3.js"
m3.change();

4.3 直接导入并执行模块代码

m4.js

for(let i = 0; i<3; i++) {
	console.log(i);
}

import './m4.js' // 直接导入并执行模块代码

4.4 浏览器使用

<script type="module">
	// 写引入import代码
</script>

还可以专门写一个js文件引入模块

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

项目中一般不会这样用，而是用babel

5. 项目中使用babel

1. 安装工具

①babel-cli ②babel-preset-env ③browserify(或者webpack)

npm i babel-cli babel-preset-env browserify -D

2. 运行

局部安装前面加上npx

npx babel src/js -d dist/js --preset=babel-preset-env

3. 打包

npx browserify dist/js/app.js -o dist/bundle.js

打包的文件就可以引入到浏览器中使用

6. ES6模块化引入npm包

1. 装包

npm i jquery

2. 入口文件引入

import $ from 'jquery' // const $ = require("jquery")

7. Node.js中通过babel体验ES6模块化

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

npm install --save @babel/polyfill

项目根目录中创建配置文件babel.config.js

const persets = [
	["@babel/env", {
		targets: {
			edge: "17",
			firefox: "60",
			chrome: "67",
			safari: "11.1"
		}
	}]
];
module.exports = { presets };

执行js代码

npx babel-node index.js