1. 怎樣才能運(yùn)行 import / export
- 不同瀏覽器功能不同
現(xiàn)代瀏覽器可以通過(guò) <script type=module> 來(lái)支持 import export
IE 8~15 不支持 import export，所以不可能運(yùn)行 - 兼容策略
1). 激進(jìn)的兼容策略：把代碼全放在 <script type=module> 里
缺點(diǎn)：不被 IE 8~15 支持；而且會(huì)導(dǎo)致文件請(qǐng)求過(guò)多。
index.html
<body>
<script type="module" src="index.js"></script>
</body>
運(yùn)行 http-server project_1/
它會(huì)把所有的文件都請(qǐng)求一遍
2). 平穩(wěn)的兼容策略：把關(guān)鍵字轉(zhuǎn)譯為普通代碼，并把所有文件打包成一個(gè)文件
缺點(diǎn)：需要寫(xiě)復(fù)雜的代碼來(lái)完成這件事情
2. 把關(guān)鍵字轉(zhuǎn)移成普通代碼
將 import / export 轉(zhuǎn)成函數(shù)
使用 @babel/core ，在上一節(jié)的 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 }
運(yùn)行 node -r ts-node/register bundler_1.ts
a.js 的變化
1). import 關(guān)鍵字 -> 變成了 require()
2). export 關(guān)鍵字 -> 變成 exports['default']
伏筆
這里的 code 是字符串
a.js 變成 ES5 之后的代碼詳解
疑惑1
Object.defineProperty(exports, "__esModule", {value: true});
這是在做啥？
- 解惑
給當(dāng)前模塊添加__esModule: true屬性，方便跟 CommonJS 模塊區(qū)分開(kāi)
那為什么不直接用exports.__esModule = true;
兩種區(qū)別不大，上面寫(xiě)法功能更強(qiáng)，exports.__esModule兼容性更好
疑惑2
exports["default"] = void 0;
這是在做啥？
解惑
void 0 等價(jià)于 undefined，老 JSer 的常見(jiàn)過(guò)時(shí)技巧
這句話是為了強(qiáng)制清空 exports['default'] 的值
細(xì)節(jié)1
import b from './b.js' 變成了
var _b = _interopRequireDefault(require("./b.js"))
b.value 變成了
_b['default'].value
解釋: _interopRequireDefault(module)
_ 下劃線前綴是為了避免與其他變量重名
該函數(shù)的意圖是給模塊添加 'default'
為什么要加 default?
CommonJS 模塊沒(méi)有默認(rèn)導(dǎo)出，加上方便兼容
內(nèi)部實(shí)現(xiàn)：return m && m.__esModule ? m : { "default": m }
其他 _interop 開(kāi)頭的函數(shù)大多都是為了兼容舊代碼
細(xì)節(jié)2
export default a 變成了
var _default = a; exports["default"] = _default;
簡(jiǎn)化一下就是 exports["default"] = a
const x = 'x'; export {x} 會(huì)變成 var x = 'x'; exports.x = x
解釋
這個(gè) _default 中間變量有什么意義我也沒(méi)看出來(lái)，也許后面有用
其他部分都挺好理解的
import 關(guān)鍵字會(huì)變成 require 函數(shù)?
export 關(guān)鍵字會(huì)變成 exports 對(duì)象
- 本質(zhì)：ESModule 語(yǔ)法變成了 CommonJS 規(guī)則
3. 把所有的文件打包成一個(gè)
- 打包成一個(gè)什么樣的文件？
包含了所有模塊，然后能執(zhí)行所有模塊
比如：
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 從對(duì)象改為數(shù)組？
// 因?yàn)閿?shù)組的第一項(xiàng)就是入口，而對(duì)象沒(méi)有第一項(xiàng)的概念
execute(depRelation[0].key) // 執(zhí)行入口文件
function execute(key){
var item = depRelation.find(i => i.key === key)
item.code(???) // 執(zhí)行 item 的代碼，因此 code 最好是個(gè)函數(shù)，方便執(zhí)行
// 但是目前還不知道要傳什么參數(shù)給 code
// 代碼待完善
}
現(xiàn)在有三個(gè)問(wèn)題還沒(méi)解決
1). depRelation 是對(duì)象，需要變成一個(gè)數(shù)組
2). code 是字符串，需要變成一個(gè)函數(shù)
3). execute 函數(shù)待完善
3.1 把 depRelation 改為一個(gè)數(shù)組
復(fù)制 bundle_1.ts 修改如下代碼
type DepRelation = { key: string, deps: string[], code: string }[];
// 初始化一個(gè)空的 depRelation，用于收集依賴(lài)
const depRelation: DepRelation = [];
const item = { deps: [], code: es5Code }
traverse(ast, {
enter: path => {
if (path.node.type === 'ImportDeclaration') {
item.deps.push(depProjectPath)
}
}
})
3.2 把 code 由字符串改為函數(shù)
上面代碼 code2 加上${code2}后就是一個(gè)函數(shù)了
require, module, exports 這三個(gè)參數(shù)是 CommonJS 2 規(guī)范規(guī)定的
3.3 完善 execute 函數(shù)（主體思路）
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)) // 把相對(duì)路徑變成 key 比如./b.js => b.js
}
modules[key] = { __esModule: true } // modules['a.js'] 給 a.js 準(zhǔn)備一個(gè)空對(duì)象方便它去掛載
var module = { exports: modules[key] }
item.code(require, module, module.exports) // 執(zhí)行 a.js 的代碼執(zhí)行后就會(huì)掛載到 module.exports 上面
return module.exports
}
3.4 最終文件主要內(nèi)容
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)
...
}
// 詳見(jiàn) dist.js
dist.js 代碼
https://github.com/wanglifa/webapck-demo-2/blob/main/dist.js
雖然我們已經(jīng)知道了最終文件的主要內(nèi)容，但是怎么才能得到這個(gè)最終文件那？
答：拼湊出字符串，然后寫(xiě)入文件
var dist = "";
dist += content;
writeFileSync('dist.js', dist)
3.5 自動(dòng)創(chuàng)建最終文件
- bundler_3.ts（基于 bundler_2.ts 復(fù)制修改的）
+ 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
+ }
運(yùn)行 node -r ts-node/register bundler_3.ts
得到新文件 dist_2.js，與 dist.js 相差無(wú)幾
3.6 目前還存在的問(wèn)題
問(wèn)題列表
1). 生成的代碼中有多個(gè)重復(fù)的 _interopXXX 函數(shù)
2). 只能引入和運(yùn)行 JS 文件
3). 只能理解 import，無(wú)法理解 require
4). 不支持插件
5). 不支持配置入口文件和 dist 文件名
