实现一款简单的JavaScript打包器

最新推荐文章于 2023-12-08 17:31:09 发布

原创最新推荐文章于 2023-12-08 17:31:09 发布 · 421 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #webpack

本文介绍了如何实现一个简单的JavaScript打包器，不涉及CSS、图片等资源的打包。讲解了所需的工具，如path、@babel/*等，并通过步骤详细解析了从读取文件内容、生成AST、遍历更新、转译代码到建立依赖关系的过程。最后，通过实例验证了打包后文件的可用性，指出该打包器的局限性，并推荐了一个Vue知识总结资料。

前言

在现在的前端大环境下，由从前的html、css、js，逐渐衍生出来了前端的工程化，由简到繁，越来越复杂，最复杂的要属我们的webpack了，已经出现了webpack工程师，用来专门配置webpack。

前端工程化打包工具千千万，谁又是你的NO.One。

本篇文章实现的是一款简单的javaScript打包工具，不涉及非javaScript的打包，如：css、html、静态文件等。

环境

我们的电脑上需要配备node环境。

所需部件工具

`fs`

fs模块是用来操作文件的，该模块只能在node环境中使用，不可以在浏览器中使用。

path

path模块是用来处理文件及文件路径的一个模块。

@babel/parser

@babel/parser模块用于接收源码，进⾏词法分析、语法分析，⽣成抽象语法树（Abstract Syntax Tree），简称ast。

@babel/traverse

@babel/traverse模块用于遍历更新我们使用@babel/parser生成的AST。对其中特定的节点进行操作。

@babel/core

@babel/core模块中的transform用于编译我们的代码，可以转编为第版本的代码，让它的兼容性更强。本文使用的是transformFromAstSync，其效果都是一样的。

@babel/preset-env

@babel/preset-env模块是一个智能环境预设的工具模块，允许我们使用最新的es规范进行编写代码，无需对目标环境需要哪些语法转换进行各种繁琐细节的管理。

编写打包器

我们将结合上面的工具模块编写出一款自己的js打包工具，如需打包非js内容还需其他模块工具。

本文实现的仅能打包js，让我们一起动手吧。

有个小细节提醒下各位朋友

在mac系统下在终端中打包出来的内容和window终端打印出来是一样的，只是mac下是隐视的。

环境搭建

首先我们需要新建一个文件夹，然后执行npm init / pnpm init，生成package.json文件。然乎安装上面的模块。

 //npm
npm i @babel/core @babel/parser @babel/preset-env @babel/traverse

//pnpm
pnpm i @babel/core @babel/parser @babel/preset-env @babel/traverse

新建`main.js`文件

我们新建一个main.js文件，用来编写我们的代码，当然你也可以使用其他的文件名。

新建`src`目录

这里我们需要新建一个src目录，用来装我们写的代码。

在src目录里面我们新建两个js文件，如下：

 // foo.js
const foo = () => {console.log('我是foo');
}

export {foo
}

我们再新建一个index.js文件，并引入foo.js，并在index.js的方法里面执行foo方法。然后我们执行index防范。

// index.js

import { foo } from "./foo.js"

const index = () => {foo()console.log('我是index');for(let item of [1, 2]){console.log(item);}
}

index()

编写`main.js`

现在到了我们来开始编写main.js的内容。

引入我们刚刚需要的工具模块，这里我们需要使用require的形式进行引用，

 const fs = require('fs')
const path = require('path')
const parser = require('@babel/parser')
// 这里需要添加.default来引入@babel/traverse模块，因为require不支持default的导出，故添加此内容
const traverse = require('@babel/traverse').default
const babel = require('@babel/core')

读取文件内容

我们添加readFile方法读取我们编写的js文件内容，这里我们使用fs模块中的readFileSync方法，并设置内容格式为utf-8。

然后我们传入index.js文件的路径并执行该方法。

const readFile = (fileName) => {const content = fs.readFileSync(fileName, 'utf-8')console.log(content);
}

readFile('./src/index.js')

我们在终端执行node main.js。

我们看到终端打印出来了我们index.js文件中的内容。和我们index.js中的内容一模一样，不一样的地方在于，打印出来的是字符串，里面加了\n换行符。

import { foo } from "./foo.js"

const index = () => {foo()console.log('我是index');for(let item of [1, 2]){console.log(item);}
}

index()

将拿到的文件内容生成`ast`语法树

上面我们已经拿到了我们写的代码，现在我们要通过@babel/parser工具生成我们的ast。

我们在readFile的方法中添加@babel/parser，并设置sourceType为module。并依旧在终端执行node main.js。

 const ast = parser.parse(content, {sourceType: 'module'})console.log(ast);

打印结果如下，是一个node格式的节点，我们的代码内容在program -> body 中。

 Node {type: 'File',start: 0,end: 165,loc: SourceLocation {start: Position { line: 1, column: 0, index: 0 },end: Position { line: 12, column: 7, index: 165 },filename: undefined,identifierName: undefined},errors: [],program: Node {type: 'Program',start: 0,end: 165,loc: SourceLocation {start: [Position],end: [Position],filename: undefined,identifierName: undefined},sourceType: 'module',interpreter: null,body: [ [Node], [Node], [Node] ],directives: []},comments: []}

使用`@babel/traverse`遍历更新我们的`ast`

这里我们使用@babel/traverse工具遍历我们刚刚生成的ast。

此环境我们需要新建一个名为dependencies的对象，用来装我们处理好的ast的依赖关系。

我们将刚刚的ast传进去，并对其option中的ImportDeclaration等于一个函数，添加一个形参接收每个文件的路径。

 const dependencies = {}traverse(ast, {ImportDeclaration: ({ node }) => {}})

我们通过path模块来处理我们文件的路径。

 const dirName = path.dirname(fileName)

我们需要对我们的文件名和路径进行进一步的处理。并对其进行正则替换反斜杠。

 const dir = './' + path.join(dirName, node.source.value).replace('\\', '/')

上面代码中的node.source.value就是我们根据ast中获取到的所有的文件名和路径。

我们将我们拿到的文件路径存入dependencies对象中。

 dependencies[node.source.value] = dir

最终我们在终端执行node main.js并打印我们的dependencies对象。打印内容和我们需要编译的文件路径一致。

 { './foo.js': './src/foo.js' }

使用`@babel/core`转编我们的代码

这里我们需要使用@babel/core工具中的transform方案转编我们的代码，让我们的代码在第版本的浏览器中也可以正常运行。

这里我们使用最新的api transformFromAstSync来转编我们的代码。

transformFromAstSync的作用：将我们刚刚修改的ast转编回我们的代码。

我们只需要它转换后的代码，其他的我们不需要，所以我们对其结果进行解构，只获取其代码。

 const { code } = babel.transformFromAstSync(ast, null, {})

我们这里需要使用到@babel/preset-env，对我们的代码进行降级处理，也是就是说我们使用的新版规范编写，我们要转它转回老版本规范。如果这里我们不处理，我们的代码也将不会处理，原模原样的输出。

所以我们需要给其添加一个presets属性并放入我们的@babel/preset-env工具。这里我们将modules属性设为false，让它输出为esm格式的代码。

其他属性扩展：commonjs、amd、umd、systemjs、auto

 const { code } = babel.transformFromAstSync(ast, null, {presets: [["@babel/preset-env",{modules: false}]]})

我们在终端执行node main.js，打印内容如下：

import { foo } from "./foo.js";
var index = function index() {foo();console.log('我是index');for (var _i = 0, _arr = [1, 2]; _i < _arr.length; _i++) {var item = _arr[_i];console.log(item);}
};
index();

readFile方法完整代码：

const readFile = (fileName) => {const content = fs.readFileSync(fileName, 'utf-8')const ast = parser.parse(content, {sourceType: 'module'})const dependencies = {}traverse(ast, {ImportDeclaration: ({ node }) => {const dirName = path.dirname(fileName)const dir = './' + path.join(dirName, node.source.value).replace('\\', '/')dependencies[node.source.value] = dir}})const { code } = babel.transformFromAstSync(ast, null, {presets: [["@babel/preset-env",{modules: false}]]})return {fileName,dependencies,code}

}

它已经成功的对我们的代码进行了降级处理，我们将我们的文件名/文件路径、依赖关系（dependencies）、代码（code）进行return返回出去，方便我们后面使用。

编写依赖关系生成器

我们需要新建一个名为createDependciesGraph的方法，用来收集我们的文件依赖关系。添加一个形参接收我们传入的文件名。

const createDependciesGraph = entry => {}

创建一个一个名为graphList的数组，用来装我们的readFile方法return出来的返回值。

const graphList = [readFile(entry)]

我们这里需要进行递归处理graphList，防止里面有多重依赖。

for(let i = 0;i < graphList.length; i++){}

我们需要在循环中暂存每一项，所以我们声明一个item来装。

const item = graphList[i]

我们这里还需要暂存每一项的依赖关系。

const { dependencies } = item

这里我们需添加一个判断，如果存在依赖关系的，我们继续再次循环它的依赖关系层，并插入graphList中，以此往复的进行递归嵌套循环，并且进行文件内容读取，直至循环结束。

 if(dependencies){for(let j in dependencies){graphList.push( readFile( dependencies[j] ) )}}

此部分完整代码：

const createDependciesGraph = entry => {const graphList = [readFile(entry)]for(let i = 0;i < graphList.length; i++){const item = graphList[i]const { dependencies } = itemif(dependencies){for(let j in dependencies){graphList.push(readFile(dependencies[j]))}}}console.log(graphList);
}

我们打印一下已经处理好的graphList，终端输入node main.js，结果如下：

[{fileName: './src/index.js',dependencies: { './foo.js': './src/foo.js' },code: import { foo } from "./foo.js";  var index = function index() { foo(); console.log('我是index'); for (var _i = 0, _arr = [1, 2]; _i < _arr.length; _i++) { var item = _arr[_i]; console.log(item); } }; index();},{fileName: './src/foo.js',dependencies: {},code: var foo = function foo() {console.log('我是foo');};export { foo };}
]

关系层梳理

我们看到刚刚的已经完整的打印出来了我们的关系层了，我们现在需要对其进行梳理。

我们新建一个对象来装我们的梳理好的关系层。

const graph = {}

这里我们循环graphList数组，并向graph中写入我们的详细依赖关系图层。

 for(let item of graphList){const {dependencies, code} = itemgraph[item.fileName] = {dependencies,code}}

我们打印一下刚刚的梳理好的内容，依旧是在终端输入node main.js:

{'./src/index.js': {dependencies: { './foo.js': './src/foo.js' },code: import { foo } from "./foo.js";var index = function index() {foo();\n' +console.log('我是index');for (var _i = 0, _arr = [1, 2]; _i < _arr.length; _i++) {var item = _arr[_i];console.log(item);}};index();},'./src/foo.js': {dependencies: {},code: var foo = function foo() {console.log('我是foo');};export { foo };}
}

我们需要将梳理好的关系层，return返回出去，方便我们后面使用。

return graph

createDependciesGraph方法完整代码：

const createDependciesGraph = entry => {const graphList = [readFile(entry)]for(let i = 0;i < graphList.length; i++){const item = graphList[i]const { dependencies } = itemif(dependencies){for(let j in dependencies){graphList.push(readFile(dependencies[j]))}}}const graph = {}for(let item of graphList){const {dependencies, code} = itemgraph[item.fileName] = {dependencies,code}}return graph
}

我们先创建一个文件管理的方法

这一步我们先创建一个文件夹管理的方法，用于我们每次打包的时候去清空目录，重新创建。

我们声明一个名为rmdir的方法，管理我们的打包目录文件夹

const rmdir = async () =>{}

我们给它内部return一个new Promise的实例，至于原因后面用到了懂了，方便我们后面使用。

const rmdir = async () =>{return new Promise(async (resolve, reject) => {})
}

我们声明一个err用来获取我们操作文件夹、文件时的错误，

let err = null

我们读取我们当前打包文件夹的状态，如果存在则清空并删除掉。recursive表示是否删除文件夹，true为删除。

const isDir = fs.existsSync('dist')

if(isDir){fs.rmdir('dist', {recursive: true},error => {if(error){err = error}})
}

这里我们进行错误判断，当err为真我们则抛错并return出去。

if(err){reject(err)return
}

这里我们使用setTimeout来延时通知成功，避免删除文件夹和创建文件夹同时进行，导致创建不成功。

setTimeout(()=>{resolve()
}, 1000)

rmdir完整代码：

const rmdir = async () =>{return new Promise(async (resolve, reject) => {let err = nullconst isDir = fs.existsSync('dist')if(isDir){fs.rmdir('dist', {recursive: true},error => {if(error){err = error}})}if(err){reject(err)return}setTimeout(()=>{resolve()}, 1000)})
}

代码生成器方法

这里我采用的是esbuild的一种打包输出模式，也就是打包后的文件是根据项目创建时的目录规则进行同步生成的。

这里我们创建一个名为generateCode的方法，进行我们的代码生成入口调用，并对生成文件进行编写处理。

const generateCode = entry => {}

在它的内部调用createDependciesGraph方法，并将entry（打包的入口文件）传递进去。并声明codeInfo去接收。

const codeInfo = createDependciesGraph(entry)

我们可以先打印看一下codeInfo长啥样。

{'./src/index.js': {dependencies: { './foo.js': './src/foo.js' },code: import { foo } from "./foo.js";var index = function index() {foo();console.log('我是index');for (var _i = 0, _arr = [1, 2]; _i < _arr.length; _i++) {var item = _arr[_i];console.log(item);}};index();},'./src/foo.js': {dependencies: {},code: var foo = function foo() {console.log('我是foo');};export { foo };}
}

现在我们根据依赖关系创建文件夹并写入文件。

此时此刻我们就排上了刚才的rmdir方法了，我们调用rmdir方法，并在.then中编写我们的创建文件流程。这就是刚刚为啥创建rmdir时返回一个Promise的原因，在等删除清空打包目录后再创建打包文件夹及文件，这样我们就避免了同时进行文件夹、文件的创建与删除的问题。

rmdir().then(()=>{})

现在我们来创建打包目录文件夹。

fs.mkdir('dist', () => {})

我们在创建打包文件夹的回调中循环我们的依赖关系，因codeInfo是对象，我们不能使用for..of...，使用的是es6中新增的for..in..。

for(let key in codeInfo){}

这里我们创建同名文件夹，并将指定代码写入同名文件中。这里获取我们通过split的方式获取当前的文件名称，并取最后一项，因最后一项就是我们的文件名。

let value = key.split('/')
value = value[value.length - 1]

我们根据上面获取到的文件名创建问价，并将对应的代码写入文件中。

let value = key.split('/')
value = value[value.length - 1]

fs.writeFile(`./dist/${value}`, codeInfo[key]['code'], [], () => {})

generateCode方法完整代码

const generateCode = entry => {const codeInfo = createDependciesGraph(entry)console.log(codeInfo);rmdir().then(()=>{fs.mkdir('dist', () => {for(let key in codeInfo){let value = key.split('/')value = value[value.length - 1]fs.writeFile(`./dist/${value}`, codeInfo[key]['code'], [], () => {})}})})

}

我们需要在main.js中调用我们的generateCode代码生成器的方法。我们在调用的同时需要传入打包文件的入口文件。

generateCode('./src/index.js')

我们就写完了，现在我们来运行一下，在终端输入node main.js并允许。

我们就会发现我们的项目目录生成了dist目录，里面是我们的src下的js文件。

我们看一下，foo.js和index.js文件中是否是src目录下的那些内容。、

foo.js

var foo = function foo() {console.log('我是foo');
};
export { foo };

index.js

import { foo } from "./foo.js";
var index = function index() {foo();console.log('我是index');for (var _i = 0, _arr = [1, 2]; _i < _arr.length; _i++) {var item = _arr[_i];console.log(item);}
};
index();

验证打包的文件是否可以允许

我们新建一个index.html,，并引入dist目录下的index.js文件。

<script src="./dist/index.js" type="module"></script>

效果如下：

我们打包后的文件是可以正常运许的。

完整代码

 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 readFile = (fileName) => {const content = fs.readFileSync(fileName, 'utf-8')const ast = parser.parse(content, {sourceType: 'module'})const dependencies = {}traverse(ast, {ImportDeclaration: ({ node }) => {const dirName = path.dirname(fileName)const dir = './' + path.join(dirName, node.source.value).replace('\\', '/')dependencies[node.source.value] = dir}})const { code } = babel.transformFromAstSync(ast, null, {presets: [["@babel/preset-env",{modules: false}]]})return {fileName,dependencies,code}

}

const createDependciesGraph = entry => {const graphList = [readFile(entry)]for(let i = 0;i < graphList.length; i++){const item = graphList[i]const { dependencies } = itemif(dependencies){for(let j in dependencies){graphList.push(readFile(dependencies[j]))}}}const graph = {}for(let item of graphList){const {dependencies, code} = itemgraph[item.fileName] = {dependencies,code}}return graph
}

const generateCode = entry => {const codeInfo = createDependciesGraph(entry)rmdir().then(()=>{fs.mkdir('dist', () => {for(let key in codeInfo){let value = key.split('/')value = value[value.length - 1]fs.writeFile(`./dist/${value}`, codeInfo[key]['code'], [], () => {})}})})

}

const rmdir = async () =>{return new Promise(async (resolve, reject) => {let err = nullconst isDir = fs.existsSync('dist')if(isDir){fs.rmdir('dist', {recursive: true},error => {if(error){err = error}})}if(err){reject(err)return}setTimeout(()=>{resolve()}, 1000)})
}

generateCode('./src/index.js')