# module-compare

**Repository Path**: thdxbl/module-compare

## Basic Information

- **Project Name**: module-compare
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-13
- **Last Updated**: 2022-04-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# modules-introduction

本仓库用来记录各个模块机制的加载示例

## amd
AMD推崇依赖前置（在定义模块的时候就要声明其依赖的模块）
使用define来定义模块，return来输出接口， require来加载模块，这是AMD官方推荐用法

``` javascript
// a.js
define(['c'],function () {
  return 1;
})

// b.js
require(['a'], function (a) {
  console.log(a)
})
```
当require()函数加载a模块的时候，就会先加载c模块。当a模块有多个依赖时，就将所有的依赖都写在define()函数第一个参数数组中，所以说AMD是依赖前置的
## cmd
// CMD推崇依赖就近（只有在用到某个模块的时候再去require——按需加载）
使用define来定义模块，exports.xx来输出接口,require来加载模块

``` javascript
// c.js
define(function (require, exports, module) {
  var a = require('./a')
  var b = require('./b')
})
```
CMD方式： 在使用过程中提出依赖，就是不管代码写到哪突然发现需要依赖另一个模块，那就在当前代码用require引入就可以了

## umd
兼容amd和commonjs

## esmodule
通过import、export实现模块的输入输出
使用export default导出 （不需要{}）

ES6 模块输出的是值的引用（原始值变了，import加载的值也会跟着变）；
ES6 模块是编译时输出接口；
ES6 Module可以单独加载其中的某个接口；
ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";
## commonjs
通过module.exports=xx\exports.xx,require实现模块的输入输出
CommonJS 模块输出的是一个值的拷贝（浅拷贝），ES6 模块输出的是值的引用（原始值变了，import加载的值也会跟着变）。
CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
CommonJS加载的是整个模块，将所有的接口全部加载进来，ES6 Module可以单独加载其中的某个接口；
CommonJS this指向当前模块(为空{},就像在浏览器里面非严格模式指向window一样)，ES6 Module this指向undefined;

## esmodule和commonjs的导入
import 同步 编译阶段加载，并会卡住线程  
import() 异步 运行时加载  
require() 同步 运行时加载


## ES Modules能Tree-shaking 的主要原因：
1. import 只能作为模块顶层的语句出现，不能出现在 function 里面或是 if 里面。
2. import 的模块名只能是字符串常量。
3. 不管 import 的语句出现的位置在哪里，在模块初始化的时候所有的 import 都必须已经导入完成。
4. import binding 是 immutable 的，类似 const。比如说你不能 import { a } from ‘./a’ 然后给 a 赋值个其他什么东西。

## Tree-shaking 要注意副作用
也就是在导出文件，导出的函数在导出文件自己调用，不在导入文件调用
如果不消除副作用，也会把这个函数打包进来：
npx rollup index.js --file bundle.js
如果消除则不会：
npx rollup index.js --file bundle-no-effect.js --no-treeshake.moduleSideEffects
因此在打包地时候你可以显示地指定treeshake.moduleSideEffects 为 false