ES Modules基本特性
- 自动采用严格模式，忽略'use strict'
- 每个ESM模块都是单独的私有作用域
- ESM是通过CORS去请求外部JS模块的
- ESM的script标签会延迟执行脚本( 类似 deref )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module" src="app.js"></script>
</body>
</html>
// app.js
import { foo } from './module.js'
console.log(foo) // ！！！foo 不能被修改
// module.js
const foo = 'es modules'
export { foo }
// nodejs 内置模块兼容ESM提取成员的方式
import { writeFileSync } from 'fs'
存在的问题
- ES Modules 存在环境兼容问题
- 模块文件过多，网络请求频繁
- 所有的前端资源都需要模块化
- 结论：模块化是必要的！
模块打包工具
- 打包工具解决的是前端整体的模块化，并不单指JavaScript模块化
- 模块打包器： 资源整合
- 模块加载器： 编译转换
- 代码拆分 ： 按需加载
Webpack
快速上手
- Loader 机制是Webpack的核心，通过添加相应的Loader，我们可以处理任何类型的文件。
- webpack 建议根据代码的需要动态导入资源 JavaScript驱动了整个前端应用：
- 1、逻辑合理，JS确实需要这些资源文件的配合来完成功能
- 2、确保上线时资源文件不会缺失
要求速记：
- webpack Dev Server 集成“自动编译”和“自动刷新浏览器”等功能
- devtool: cheap-module-eval-source-map 最详细的source map
- eval 使用eval执行模块代码
- cheap 包含行内信息
- module 能够得到Loader 处理之前的源代码
devtool 的详细内容可点击 这里
开发环境下，首选cheap-module-eval-source-map 原因如下：
- 代码每行不会超过80个字符
- 代码经过Loader 转换过后差异较大
- 首次打包快慢无所谓，重写打包相对较快
- 生产环境下，首选none，防止代码泄露，nosources-source-map勉强可以，会显示报错位置
Rollup
优点：
- 输出结果更加扁平
- 自动移除未引用代码
- 打包结果依然完全可读
缺点：
- 加载非ESM的第三方模块比较复杂
- 模块最终都被打包到一个函数中，无法实现HMR
- 浏览器环境中，代码拆分功能依赖AMD库
- 适用：开发框架、类库
总结： Webpack大而全，Rollup小而美
Parcel
零配置的前端打包工具，非常容易上手，详情可点击这里
