webpack 核心原理

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 文件名