手写webpack核心原理，再也不怕面试官问我webpack原理

这里的value指的是什么意思呢？其实就是import的值，可以看我们的index.js的代码。

import add from “./add.js”

import {minus} from “./minus.js”;

const sum = add(1,2);

const division = minus(2,1);

console.log(sum);

console.log(division);

可见，value指的就是import后面的 ‘./add.js’ 和 ‘./minus.js’

然后我们将file目录路径跟获得的value值拼接起来保存到deps里，美其名曰：收集依赖。

ok，这个操作就结束了，执行看看收集成功了没？

oh my god。又成功了。

[](()六、ES6转成ES5（AST）

---

现在我们需要把获得的ES6的AST转化成ES5，前面讲到过，执行这一步需要两个依赖包

npm install @babel/core @babel/preset-env

我们现在将依赖引入并使用

const fs = require(‘fs’)

const path = require(‘path’)

const parser = require(‘@babel/parser’)

const traverse = require(‘@babel/traverse’).default

const babel = require(‘@babel/core’)

const getModuleInfo = (file)=>{

const body = fs.readFileSync(file,‘utf-8’)

const ast = parser.parse(body,{

sourceType:‘module’ //表示我们要解析的是ES模块

});

const deps = {}

traverse(ast,{

ImportDeclaration({node}){

const dirname = path.dirname(file)

const abspath = “./” + path.join(dirname,node.source.value)

deps[node.source.value] = abspath

}

})

新增代码

const {code} = babel.transformFromAst(ast,null,{

presets:[“@babel/preset-env”]

})

console.log(code);

}

getModuleInfo(“./src/index.js”)

我们看看官网文档对@babel/core 的transformFromAst的介绍

害，又是一如既往的简略。。。

简单说一下，其实就是将我们传入的AST转化成我们在第三个参数里配置的模块类型。

好了，现在我们来执行一下，看看结果

我的天，一如既往的成功。可见 它将我们写const 转化成var了。

好了，这一步到此结束，咦，你可能会有疑问，上一步的收集依赖在这里怎么没啥关系啊，确实如此。收集依赖是为了下面进行的递归操作。

[](()七、递归获取所有依赖

---

经过上面的过程，现在我们知道getModuleInfo是用来获取一个模块的内容，不过我们还没把获取的内容return出来，因此，更改下getModuleInfo方法

const getModuleInfo = (file)=>{

const body = fs.readFileSync(file,‘utf-8’)

const ast = parser.parse(body,{

sourceType:‘module’ //表示我们要解析的是ES模块

});

const deps = {}

traverse(ast,{

ImportDeclaration({node}){

const dirname = path.dirname(file)

const abspath = “./” + path.join(dirname,node.source.value)

deps[node.source.value] = a