这里的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