commonJs 和 ES Module
简单理解commonJs 和 ES Module的规范
CommonJs是通过 module.exports , exports 进行导出， require引入
ES Module是通过 export default, export const, export {}进行导出, import {}, import引入
区别
commonJs支持动态的引入， ES Module是静态
动态引入
let lists: string[] = ['./index.js', './home.js']
lists.forEach(url => { requrie(url) }) //动态引入
if(list.length) requrie(list[0]) // 动态引入
ES Module语句 import只能声明在该文件的最顶部 不能动态增加语句, 因为ES Module语句运行在代码编译时候。
if(true) import xxx from 'xxx' //报错
导入值的变化
CommonJS是拷贝之后导出的值, 更改完num没有发生变化，但是导入的数值可以修改。
// index.ts
let num: number = 0
module.export = { num, add() { ++num } }
//bundle.ts
let {num, add} = require('./index.js') console.log(num) // 0
add()
console.log(num) //0
num = 10
CommonJs解决了变量污染，文件依赖等问题，上面我们也介绍了它的基本语法，它可以动态导入(代码发生在运行时)，不可以重复导入。
ES Module导出的值是值的引用，并且内部具有映射关系，这是export关键字的作用。并且导入的值，不能进行修改，只是readonly状态
// index.js
export let num = 0;
export function add() { ++ num }
// bundle.js
import {num ,add} from './index.js'
console.log(num) //0
add()
console.log(num) // 1
num = 10 // 抛出错误
CommonJs和Es Module的区别
CommonJs
- CommonJs可以动态加载语句，代码发生在运行时
- CommonJs混合导出，还是一种语法，只不过不用声明前面对象而已，当我导出引用对象时之前的导出就被覆盖了
- CommonJs导出值是拷贝，可以修改导出的值，这在代码出错时，不好排查引起变量污染
Es Module
- Es Module是静态的，不可以动态加载语句，只能声明在该文件的最顶部，代码发生在编译时
- Es Module混合导出，单个导出，默认导出，完全互不影响
- Es Module导出是引用值之前都存在映射关系，并且值都是可读的，不能修改
vite 和 webpack区别
开发阶段vite的速度远快于webpack，主要是因为：
webpack是先打包再启动开发服务器，vite是直接启动开发服务器，然后按需编译依赖文件。
- webpack先打包，再启动开发服务器，请求服务器时直接给予打包后的结果；
- vite直接启动开发服务器，请求哪个模块再对哪个模块进行实时编译；
- 由于现代浏览器本身就支持ES Modules，会主动发起请求去获取所需文件。vite充分利用这点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack先打包，交给浏览器执行的文件是打包后的；
- 由于vite启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快。当浏览器请求需要的模块时，再对模块进行编译，这种按需动态编译的模式，极大缩短了编译时间，当项目越大，文件越多时，vite的开发时优势越明显；
- 在HRM(热更新)方面，当某个模块内容改变时，让浏览器去重新请求该模块即可，而不是像webpack重新将该模块的所有依赖重新编译；
- 当需要打包到生产环境时，vite使用传统的rollup进行打包，所以，vite的优势是体现在开发阶段，另外，由于vite使用的是ES Module，所以代码中不可以使用CommonJs；
