实现一款简单的JavaScript打包器

前言

在现在的前端大环境下，由从前的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中的内容一模一样，不一样的地方在于，打印出来的是字符串