什么是前端模块化？

前端模块化

• 传统开发遇到的问题
  1. js变量命名冲突
  2. 文件依赖关系复杂

模块化解决方案

• 模块化，就是把单独的功能封装到一个文件当中，模块之间相互隔离，通过公开的接口通讯，成为其他模块的依赖
• 优势：方便代码重用，提升开发效率，方便后期的维护

历史小知识 - 过去的模块化工具

• 浏览器端模块化规范
  • AMD Require.js
  • CMD Sea.js
• 服务器端模块化规范
  • CommonJS
    • 单位件模块和包
    • 模块成员导出：module.exports 和 exports
    • 模块成员导入：require(‘模块标识符’)函数

ES6通用统一模块化规范

无论是AMD/CMD/Common都有差异和使用场景的局限，非官方出品，并不是通用统一的规范

• 每一个js文件都是一个独立的模块
• 导入模块成员，使用import关键字，import 接收名称 from 模块标识符
• 导出模块成员，使用export关键字，export default {} 默认导出

练习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
• 配置babel.config.js

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

• 创建index.js，通过 npx babel-node index.js 执行代码（ 先用clog测试）
• 新建m1.js 练习ES6导出

let a = 10;
let b = 20;
let c = 30;
function show(){
	console.log("show");
}
export default {
	a,
	b,
	show
}
//index.js
import m1 from "./m1.js"; 
console.log(m1);

• 注意：每个模块，只能用一次export default
• 如果没有并不会报错，默认导出{}

按需导入、导出

• 按需导入import {接收名称1，接收名称2，接收名称n} from 模块标识符

• 按需导出export

//m1.js
//可以多次按需导出
export let s1 = "s111";
export let s2 = "s222";
export function bb(){
	console.log("bbb");
}
//index.js
import m1,{s1,s2,bb} from "./m1.js";