该工具可以实现以下两个功能
- 将
ES6转换为ES5 - 支持在
JS文件中import CSS文件
通过这个工具的实现，大家可以理解到打包工具的原理到底是什么
实现
因为涉及到
ES6转ES5，所以我们首先需要安装一些Babel相关的工具
yarn add babylon babel-traverse babel-core babel-preset-env
@前端进阶之旅: 代码已经复制到剪贴板
接下来我们将这些工具引入文件中
const fs = require('fs')
const path = require('path')
const babylon = require('babylon')
const traverse = require('babel-traverse').default
const { transformFromAst } = require('babel-core')
@前端进阶之旅: 代码已经复制到剪贴板
首先，我们先来实现如何使用 Babel 转换代码
function readCode(filePath) {
// 读取文件内容
const content = fs.readFileSync(filePath, 'utf-8')
// 生成 AST
const ast = babylon.parse(content, {
sourceType: 'module'
})
// 寻找当前文件的依赖关系
const dependencies = []
traverse(ast, {
ImportDeclaration: ({ node }) => {
dependencies.push(node.source.value)
}
})
// 通过 AST 将代码转为 ES5
const { code } = transformFromAst(ast, null, {
presets: ['env']
})
return {
filePath,
dependencies,
code
}
}
@前端进阶之旅: 代码已经复制到剪贴板
- 首先我们传入一个文件路径参数，然后通过
fs将文件中的内容读取出来 - 接下来我们通过
babylon解析代码获取AST，目的是为了分析代码中是否还引入了别的文件 - 通过
dependencies来存储文件中的依赖，然后再将AST转换为ES5代码 - 最后函数返回了一个对象，对象中包含了当前文件路径、当前文件依赖和当前文件转换后的代码
接下来我们需要实现一个函数，这个函数的功能有以下几点
