腾讯互娱AMS | 我的打包我做主——浅析前端构建

webpack是一个工具，是一个致力于做前端构建的工具。简单的理解：webpack就是一个模块打包机器，它可以将前端的js代码(不管ES6/ES7)、引用的css资源、图片资源、字体资源等各种资源进行打包整合，最后按照预设规则输出到一个或多个js模块文件中，并且可以做到兼容浏览器运行。图1是一个经典的阐述webpack是什么的一张官方图

[ 图1 webpack ]

1.2 webpack做了哪些工作

webpack的运行过程中主要会做以下工作：

1.3 webpack是如何做到的

笔者结合webpack官方文档，画了一个图2，此图可以较为清晰的描述webapck的工作过程。

[ 图2 webpack的主要工作过程 ]

上图可以理解为webpack的一个生命周期，我们可以看到webpack整个生命周期分为三个大的阶段：初始化 -> 编译 ->输出。webpack的整个生命周期是围绕内部的事件流进行的。

初始化阶段，webpack不仅初始化了自身的运行实例，而且还初始化了相关的插件和插件的事件监听动作。其中插件的事件监听尤为重要，比如UglifyJs这个插件就会监听后续webpack的输出相关事件，对最后的输出做代码压缩。

编译阶段是初始化阶段后进行的，当然也支持在watch模式下，由于Entry的文件内容发生变化，而触发热更新编译。编译阶段主要是读取Entry文件，然后匹配对应的Loader对模块进行处理，生成AST， 然后分析依赖，进而递归地调用Loader对依赖进行处理。全部经Loader处理之后，再根据配置组装成chunk。

最后是输出阶段，输出阶段主要对待输出的模块文件进行最后的确认，如果有插件需要处理，则这时是插件处理的最后机会，处理之后，开始根据output的配置规则输出最终文件。

下面将从笔者近期的工作项目出发实例谈一下该如何写一个自己做主的打包工具。

2.1 为什么要自己写构建工具

笔者最近在做内部A项目的升级改造的工作，新版的A项目是一个兼具npm引用(CMD)和web直引(AMD)方式的一套代码，在该项目中，我们需要对一套原始代码，最后打包两种模式的sdk。其中一套直接用于npm版本，另外一套是和现有架构一致的线上直引版本。第二种版本需要从es6的cmd源代码转换成和web端一致的amd模式，并且每个es6模块都生成对应的amd版本的es5代码。

现有的webpack打包只能针对amd进行单一打包，模块中的引用也会被打入bundle中，这不符合预期。而且有一些具体的特性可能和实际A项目的业务逻辑有关，webpack定制程度不高。

举个例子：有a.js，b.js两个模块，源代码中这么写：
源代码：a模块

//file a.js//module aimport moduleB from 'b'module.exports={    sayHello(){             console.log('hello,this is moduleA,import from'+moduleB.getDesc());    }}
（左滑可查看完整代码，下同）

源代码：b模块

//file b.js//module bmodule.exports={    getDesc(){              return 'moduleBBB';    }}

预期输出代码：a模块
从源代码中，我们看到模块a引用了模块b，我们希望打包出来的模块a是这样的：

define('a',['b'],function(moduleB){    return {        sayHello:function(){                    console.log('hello,this is moduleA,import from'+moduleB.getDesc());        }    }})

实际输出代码：a模块

但是使用webpack的libraryTarget属性设置为’amd’之后打包出来的a模块如下，会将b模块的内容写入了a模块中，实际在运行a模块的时候b模块并没有通过amd方式异步加载，与我们的预期不符合。

define('a',[],function(){    var moduleB={        sayHello:function(){                     return 'moduleBBB';        }    }        return {        sayHello:function(){                        console.log('hello,this is moduleA,import from'+moduleB.getDesc());        }    }})

故：需要自定义编译逻辑，于是想到了自己写一套构建工具

2.2 需要做哪些准备工作

准备哪些工作取决于我们想要什么样的东西，进而要了解我们如何一步步实现这样的结果。

2.1中我已经简单说了一下我们的项目背景，下面我将这次自定义的构建工具需要关心的事情列如下：

下面我将从多个方面针对上面提出的事项逐一进行解释和实现。

2.3 定义配置文件

配置文件的定义也是由自己做主的，如何定义配置文件的结构，主要关心：

结合本项目和以上的精神，初步制定了配置文件的结构：

module.exports={    modules:[        {            name:'util.login',//模块key名，也代表模块的文件名:util/login.js            version:'pc',//代表需要打包的版本，默认为pc和mobile都打包            entryDir:'',//默认用全局的commEntryDir,有值会覆盖全局的commEntryDir，代表入口目录            outputDir:''//默认用全局的commOutputDir,有值会覆盖全局的commOutputDir，代表输出目录        },        {            name:'css!util.role',//模块key名，css!开头标识为css文件        }    ],    isMinify:true,//是否启用压缩    versionFile:path.resolve('dist','a_module_version.js'),//版本配置输出文件，用于输出版本信息    commEntryDir:'src',//入口目录    commOutputDir:'dist'//输出目录}

其中：
1.本项目中只处理两种文件：js文件和css文件

2.isMinify标识是否压缩

3.versionFile:标识版本配置输出地址

4.entry和output相关的配置

5.version标识本模块需要处理的哪些类型入口(一共两个入口：pc入口和mobile入口)

2.4 如何控制打印过程

打印过程这里指webpack执行过程中，控制台上的一些输出信息，包括成功的输出和失败的输出。一个打包工具在运行过程中，肯定需要在控制台中输出一些状态信息，供使用者参考和了解运行状态。

下图3是webpack打包在控制台上的输出样例：

[ 图3 webpack打包输出打印过程 ]

从上图中我们发现，webpack打包过程中，基本会输出以下信息：

参考webpack的控制台输出，再结合本项目，我们其实可以自定义打包过程的输出信息：

如下图4是本项目中输出信息的一个流程图：

[ 图4 控制打印过程流程图 ]

在自定义的图4流程控制下，自定义的打包工具在控制台的输出样例如图5所示。

[ 图5 自定义打包运行流程打印过程图 ]

2.5 [预处理]如何处理import、exports语法，如何转换成AMD代码

import 语法是es6中对其它模块的加载语法，exports语法是es6中对模块的输出语法，表示输出某个模块。这两个关键语法是整个ES6源码中的骨架语法，如果要转换成ES5，需要视情况而定，如果是AMD的ES5，则需要做一些特殊的转换处理，针对本项目，我们放在预处理阶段去做。

2.5.1 import的转换

本项目中import主要有以下三种使用方法：

//第一种：整体加载某js模块import LoginManger from '@a_pc/util/login'//第二种：加载某模块中的1个或多个子模块import {loginStatus,cookie} from '@a_pc/sdk'//第三种：加载cssimport '@a_pc/util/login.css'

由于本项目中只处理这三种类型的import，故可以分别针对这三种类型的js语句做转换：

1.针对第一种：正则匹配为：

var arrMatch=lineCode.match(/^(imports+[w$_]+s+froms+['"].+['"])$/);if(arrMatch){    moduleVar=arrMatch[2];//加载的模块名(内部引用的变量名)，比如样例中的：LogManage    modulePath=arrMatch[3];//引用的路径，比如:样例中的'@a_pc/util/login'}

2.针对第二种，正则匹配为：

var arrMatch=lineCode.match(/^(imports+{(.+)}s+froms+['"](.+)['"])$/);if(arrMatch){    moduleVar=arrMatch[2];//加载的模块名(内部引用的变量名)，比如样例中的：loginStatus,cookie    modulePath=arrMatch[3];//引用的路径，比如:样例中的'@a_pc/sdk'}

这种情况下：moduleVar需要进行分解，如果留意有多个子模块的情况

var arrModuleVar=moduleVar.split(',');

3.针对第三种加载css的情况：

//file b.js//module bmodule.exports={    getDesc(){              return 'moduleBBB';    }}0
每一个js，在进行文本分析的过程中，可能不止一个import语句，也就是不止一个依赖，这些依赖都要放到数组中，最后所有语句分析完之后，再组合成数组依赖。

2.5.2 exports语句的转换
本项目默认exports语句是这么写的：
//file b.js//module bmodule.exports={    getDesc(){              return 'moduleBBB';    }}1

同时也默认exports语句后面不再有任何代码，这样的话，对exports的转换就很方便：
//file b.js//module bmodule.exports={    getDesc(){              return 'moduleBBB';    }}2

下图6简单描述了整个预处理阶段ES6代码如何转换成我们需要的AMD代码的过程
[ 图6 预处理-图解AMD模块的转换过程 ]

2.6 [编译]如何处理ES6
由于本项目的源码是用ES6编写的，打包需要对ES6进行转换，转换成兼容各种浏览器的ES5代码。这种转换涉及到语法，语义，词法等分析的过程，而且涉及到的ES6语法非常多，理论上需要转换成AST。由于过程复杂，所以我们需要用成熟的第三方api库去处理。

webpack中处理js的编译的loader用的是babel，这里我们也选择babel。这里我们用到了babel的api使用方法：

1.首先npm安装babel
//file b.js//module bmodule.exports={    getDesc(){              return 'moduleBBB';    }}3

2.api使用
//file b.js//module bmodule.exports={    getDesc(){              return 'moduleBBB';    }}4

预处理过的代码作为编译阶段的输入，作为参数code传入上面的babelBuild函数中，即可输出转换过的ES5代码。

注意：由于babel-core默认只对新的语法做处理，而不处理新的api，比如map，array中的一些新的方法等，如果要处理，需要借助babel-polifill垫片处理。

2.7 [压缩]如何压缩
说到js代码压缩，大家估计都会第一个想到uglifyjs，确实，在webpack打包流程中，uglifyjs就以插件的形式为webpack的打包提供压缩服务。或许我们都知道UglifyJs的命令行使用方法，其实UglifyJs还提供了api的调用方式。

想要使用uglifyjs的api方式压缩js代码，我们需要按照以下步骤：

1.首先我们要npm安装相关的模块：
//file b.js//module bmodule.exports={    getDesc(){              return 'moduleBBB';    }}5

注意：这里安装的时候需要指定使用2.4.10版本，因为笔者在使用的过程中发现uglify-js3.x的版本在api的用法中存在一些bug。

2.api的使用
//file b.js//module bmodule.exports={    getDesc(){              return 'moduleBBB';    }}6

编译过的代码作为压缩阶段的输入，作为参数code传入上面的minifyBuild函数中，即可输出压缩过的代码。

2.8 如何输出版本文件和目标文件
2.8.1 输出版本文件
由于本项目中，我们在浏览器的层面(利用localStorage)加入了AMD模块加载缓存的机制，所以需要用到每一个js模块文件的当前版本号这么一个参数，这个版本号主要用来区分缓存中的文件和当前线上的版本是否一致。由于无需关心版本的前后关系，所以只要版本号能和文件强关联就行。
基于上面的需求，我们定义每个文件的版本号为其文本内容的32位md5签名。

所以生成版本号的解决方案如下：

1.npm安装md5模块
//file b.js//module bmodule.exports={    getDesc(){              return 'moduleBBB';    }}7

2.利用md5模块生成版本号
//file b.js//module bmodule.exports={    getDesc(){              return 'moduleBBB';    }}8

压缩过的代码作为生成版本号的函数内容输入，作为参数code传入上面的generateVersion函数中，即可输出对应文件的版本号。

2.8.1 输出目标文件
上节2.7的输出即是每个模块的目标文件内容，利用nodejs的FileSystem的api，将文件输出到配置文件中指定的outputDir中即可。

相关代码示例如下：
//file b.js//module bmodule.exports={    getDesc(){              return 'moduleBBB';    }}9

2.9 总体流程
以上是笔者在实际项目中关于如何自己打包脚本的见解，综上所述，自定义脚本的主要运行流程如图7
[ 图7 我的打包脚本运行总流程图 ]

3 总结

前端构建无非是开发阶段中利用各种工具协助我们将源代码转换成最终在线上运行的代码的一个过程。这其中涉及到很多细分的步骤，我们在项目开发阶段的过程中，可以利用成熟的构建工具如webpack、gulp、grunt等，当然也可以选择自己写构建脚本，自己定义构建过程，自己处理编译，压缩的过程。本文乃笔者在实际项目中的经验总结，我的打包我做主，我们的宗旨是一切以项目的需求为主。由于笔者水平有限，欢迎大家指正，也欢迎大家一起沟通交流前端构建。