模块化打包工具对比

2024-01-25

全局 window 的问题,定义的变量,函数,默认都在一个 window 作用域下. 比如

// a.js
var userName = '牛夫人';
console.log(userName);
// b.js
var userName = '小甜甜';
console.log(userName);
// index.html写法1
<script src= 'a.js' />
<script src= 'b.js' />
console.log(userName); // 小甜甜
// index.html写法2
<script src= 'b.js' />
<script src= 'a.js' />
console.log(userName); // 牛夫人

仅仅只是引入 a.js和 b.js两个文件的顺序不同就会导致当前页面输出不一样的值.
而且没有模块化的话很容易把业务代码写在一个很长的 js 里.
从性能来说,这个 js 会加载很长时间, 网站性能不好.
从代码角度来说. 很容易作用域相互混淆不说, 既不利于协作,也开发效率低
所以很需要模块化打包工具

模块化打包

所以当 Rollup 这种工具横空出世,模块化打包的概念开始流行.
你写代码的时候可以按照小模块分开写, 然后用上一个带有模块化打包功能的工具.
指定一个入口文件, 模块化打包工具会自动把你的文件按照入口和入口依赖的模块,按照顺序组织好.
这个过程,写代码就像搭积木. 你的项目是由一个个模块组成的.

二模块化标准

Commonjs

2009 年发布. Commonjs 最先开始使用是在 Nodejs 里提出的. 后来Webpack 能基于 Commonjs 打包.但是它的写法和 Nodejs 里的不是完全一样. Commonjs的写法是这样的

// user.js
let user = {
    getName:  function () {
        return '吴晓兰'
    },
    getAge:  function () {
        return 888
    }
};
exports = user;

// index.js
require('./user.js').

从写法上来说,它和 ECMA module 挺像的.但是他俩在引入方式上是不同的. 这里后面会讲.

ES6 module(推荐)

这是 TC39 在 ECMA262 在2015 年发布的模块化标准方案. 优点多多.

优点
静态引入, 所以比较方便做静态化代码分析. 能和构建工具结合的更好.

缺点
无法根据表达式引入. 让他不能做一些更有意思的功能.

AMD

AMD 的意思是 Aysnc module AMD 和以上几种模块化的的最大区别从名字就可以看出来. 它主要是异步引入模块的.

缺点
容易陷入地狱回调. 所以现在用的人也不是很多. 这种代码维护起来比较麻烦. 容易造 bug.

Commonjs 和 ES6 module 的区别

Commonjs 必须引入整体,module 可以引入局部

比如同样的想要获得用户名 Commonjs 是这么写的

1 2	let user = require('./user'); const userName = user.getName();

而 ES6 可以这样引入

1 2	import {getName} from './user.js' const userName = getName();

引入方式分动态和静态

Commonjs 的引入是支持写在表达式里的. 而 ES6 module 只能在最顶级引入,且不支持表达式 Commonjs 可以这么写

if(causeA) {
    require('./a.js');
} else {
    require('./b.j');
}
// 写在 forEach 里.
['./a.js','.b.js']).forEach(item=> {
    require(item);
});

而 import 的引入只能在顶级引入字符串形式的文件地址, 不能引入表达式

值映射和值复制

Commonjs 里 require 进来的文件,不管你引入几次, 其实就是第一次执行. 然后会把这个执行结果存在内存里. 等你再次 require 和调用. 其实不会再执行了,而是获取这个文件第一次的执行结果. 来做个测试

// user.js
console.log('我的天');

let user = {
    getName:  function () {
        return '吴晓兰'
    },
    getAge:  function () {
        return 888
    }
};
module.exports = user;
}
// index.js
let user = require('./user.js');
console.log(user.getName());
let user2 = require('./user.js');
console.log(use2r.getName());
// 执行 index.js,只会输出 1 个我的天.

Commonjs 的引入可以只是挂载

require 可以全局挂载不赋值变量, ES6 module 必须赋值.

有时候我们只是想执行一个 js 文件,引入进来并执行就好. 并不需要再为它赋值. Commonjs 可以单独的引用执行. ES6 module 则不可以.

1 2	require('./user'); // Commonjs写法 import user from './user' // ES6 module写法

三模块化打包工具说明

开发工具演变

发展过程

Grunt, 比较早. 工作流打包,没有 Gulp 那么方便
Gulp, 也是工作流. 比起 Grunt,他的 task 更方便复用
Rollup,比较早期的模块化打包工具,就是他提出了 tree shaking
Webpack.打包集大成者. 也是 Vue1-2 默认推荐的打包工具(目前使用最多)
Turbopack: Webpack团队开发出的下一代打包工具,速度比 Webpack 快很多
Vite: Vue 官方开发的打包工具.现在还支持 react 打包

https://juejin.cn/post/7207760939264311333