1. 怎样才能运行 import / export
- 不同浏览器功能不同
现代浏览器可以通过 <script type=module> 来支持 import export
IE 8~15 不支持 import export，所以不可能运行 - 兼容策略
1). 激进的兼容策略：把代码全放在 <script type=module> 里
缺点：不被 IE 8~15 支持；而且会导致文件请求过多。
index.html
<body>
<script type="module" src="index.js"></script>
</body>
运行 http-server project_1/
它会把所有的文件都请求一遍
2). 平稳的兼容策略：把关键字转译为普通代码，并把所有文件打包成一个文件
缺点：需要写复杂的代码来完成这件事情
2. 把关键字转移成普通代码
将 import / export 转成函数
使用 @babel/core ，在上一节的 deps_4.ts 里添加下面几行代码
import * as babel from '@babel/core';
const code = readFileSync(filepath).toString()
+ const { code: es5Code } = babel.transform(code, {
+ presets: ['@babel/preset-env']
+ })
// 初始化 depRelation[key]
+ depRelation[key] = { deps: [], code: es5Code }
运行 node -r ts-node/register bundler_1.ts
a.js 的变化
1). import 关键字 -> 变成了 require()
2). export 关键字 -> 变成 exports['default']
伏笔
这里的 code 是字符串
a.js 变成 ES5 之后的代码详解
疑惑1
Object.defineProperty(exports, "__esModule", {value: true});
这是在做啥？
- 解惑
给当前模块添加__esModule: true属性，方便跟 CommonJS 模块区分开
那为什么不直接用exports.__esModule = true;
两种区别不大，上面写法功能更强，exports.__esModule兼容性更好
疑惑2
exports["default"] = void 0;
这是在做啥？
解惑
void 0 等价于 undefined，老 JSer 的常见过时技巧
这句话是为了强制清空 exports['default'] 的值
细节1
import b from './b.js' 变成了
var _b = _interopRequireDefault(require("./b.js"))
b.value 变成了
_b['default'].value
解释: _interopRequireDefault(module)
_ 下划线前缀是为了避免与其他变量重名
该函数的意图是给模块添加 'default'
为什么要加 default?
CommonJS 模块没有默认导出，加上方便兼容
内部实现：return m && m.__esModule ? m : { "default": m }
其他 _interop 开头的函数大多都是为了兼容旧代码
细节2
export default a 变成了
var _default = a; exports["default"] = _default;
简化一下就是 exports["default"] = a
const x = 'x'; export {x} 会变成 var x = 'x'; exports.x = x
解释
这个 _default 中间变量有什么意义我也没看出来，也许后面有用
其他部分都挺好理解的
import 关键字会变成 require 函数�
export 关键字会变成 exports 对象
- 本质：ESModule 语法变成了 CommonJS 规则
3. 把所有的文件打包成一个
- 打包成一个什么样的文件？
包含了所有模块，然后能执行所有模块
比如：
var depRelation = [
{key: 'index.js', deps: ['a.js', 'b.js'], code: function... },
{key: 'a.js', deps: ['b.js'], code: function... },
{key: 'b.js', deps: ['a.js'], code: function... }
] // 为什么把 depRelation 从对象改为数组？
// 因为数组的第一项就是入口，而对象没有第一项的概念
execute(depRelation[0].key) // 执行入口文件
function execute(key){
var item = depRelation.find(i => i.key === key)
item.code(???) // 执行 item 的代码，因此 code 最好是个函数，方便执行
// 但是目前还不知道要传什么参数给 code
// 代码待完善
}
现在有三个问题还没解决
1). depRelation 是对象，需要变成一个数组
2). code 是字符串，需要变成一个函数
3). execute 函数待完善
3.1 把 depRelation 改为一个数组
复制 bundle_1.ts 修改如下代码
type DepRelation = { key: string, deps: string[], code: string }[];
// 初始化一个空的 depRelation，用于收集依赖
const depRelation: DepRelation = [];
const item = { deps: [], code: es5Code }
traverse(ast, {
enter: path => {
if (path.node.type === 'ImportDeclaration') {
item.deps.push(depProjectPath)
}
}
})
3.2 把 code 由字符串改为函数
上面代码 code2 加上${code2}后就是一个函数了
require, module, exports 这三个参数是 CommonJS 2 规范规定的
3.3 完善 execute 函数（主体思路）
const modules = {} // modules 用于缓存所有模块�function execute(key) {
if (modules[key]) { return modules[key] }
var item = depRelation.find(i => i.key === key)
var require = (path) => {
return execute(pathToKey(path)) // 把相对路径变成 key 比如./b.js => b.js
}
modules[key] = { __esModule: true } // modules['a.js'] 给 a.js 准备一个空对象方便它去挂载
var module = { exports: modules[key] }
item.code(require, module, module.exports) // 执行 a.js 的代码执行后就会挂载到 module.exports 上面
return module.exports
}
3.4 最终文件主要内容
var depRelation = [
{key: 'index.js', deps: ['a.js', 'b.js'], code: function... },
{key: 'a.js', deps: ['b.js'], code: function... },
{key: 'b.js', deps: ['a.js'], code: function... }
]
var modules = {} // modules 用于缓存所有模块
execute(depRelation[0].key)
function execute(key){
var require = ...
var module = ...
item.code(require, module, module.exports)
...
}
// 详见 dist.js
dist.js 代码
https://github.com/wanglifa/webapck-demo-2/blob/main/dist.js
虽然我们已经知道了最终文件的主要内容，但是怎么才能得到这个最终文件那？
答：拼凑出字符串，然后写入文件
var dist = "";
dist += content;
writeFileSync('dist.js', dist)
3.5 自动创建最终文件
- bundler_3.ts（基于 bundler_2.ts 复制修改的）
+ import { writeFileSync } from 'fs'
+ writeFileSync('dist_2.js', generateCode())
+ function generateCode() {
let code = ''
code += 'var depRelation = [' + depRelation.map(item => {
const { key, deps, code } = item
return `{
key: ${JSON.stringify(key)},
deps: ${JSON.stringify(deps)},
code: function(require, module, exports){
${code}
}
}`
}).join(',') + '];\n'
code += 'var modules = {};\n'
code += `execute(depRelation[0].key)\n`
code += `
function execute(key) {
if (modules[key]) { return modules[key] }
var item = depRelation.find(i => i.key === key)
if (!item) { throw new Error(\`\${item} is not found\`) }
var pathToKey = (path) => {
var dirname = key.substring(0, key.lastIndexOf('/') + 1)
var projectPath = (dirname + path).replace(\/\\.\\\/\/g, '').replace(\/\\\/\\\/\/, '/')
return projectPath
}
var require = (path) => {
return execute(pathToKey(path))
}
modules[key] = { __esModule: true }
var module = { exports: modules[key] }
item.code(require, module, module.exports)
return modules[key]
}
`
return code
+ }
运行 node -r ts-node/register bundler_3.ts
得到新文件 dist_2.js，与 dist.js 相差无几
3.6 目前还存在的问题
问题列表
1). 生成的代码中有多个重复的 _interopXXX 函数
2). 只能引入和运行 JS 文件
3). 只能理解 import，无法理解 require
4). 不支持插件
5). 不支持配置入口文件和 dist 文件名
