快速了解ES6Module模块化

ES6 Module

模块，是能够单独命名并独立完成一定功能程序语句的集合

定义听上去高大上，其实在日常项目中几乎每个文件都会用到，甚至很不起眼，

react组件的引用：

// router.js
import { createHashRouter } from 'react-router-dom';
import Contact from './pages/Contact';

const router = createHashRouter([
  {
    path: '/',
    element: <Contact />, 
]);

export { router };

// contact.jsx
export default function Contact() {
  return (
    <div>
      Contact
    </div>
  )
}

以上的export、import正对应ES6module的两个特征

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

为什么模块化？

• 代码抽象
• 代码封装
• 代码复用
• 依赖管理

模块化机制

AMD/commonJs两种机制都只能在运行时确定：

AMD

代表库require.js

/** main.js / **/
require.config({
	baseUrl: "js/lib",
	paths: {
	 "jquery": "jquery.min", 
	}
});
require(["jquery"],function($,_){
	//code
});

commonJs

一般用于node之类的服务端。

• 模块同步加载，只有加载完成才能执行后面的操作
• 首次加载缓存，再次加载只返回缓存结果

const { read, write } = require('db')

// 等价于
let _db = require('db');
let read= _db.read;
let write  = _db.write ;

ES6module

但ES6静态化，编译时就能确定模块的依赖关系和输入输出

• 不缓存，只加载需要的方法
• 编译时，import提升到整个模块的头部（但建议手动放头部）
• 多次相同导入，只执行一次

foo()

import { foo } from 'my_module';
import { foo } from 'my_module';