JS文件的自动合并

2019独角兽企业重金招聘Python工程师标准>>>

    现在的前端开发中，JS文件越来越多。一般来说，各个前端框架都提供了按需加载的功能。但基于某些原因，如减少带宽，代码混淆等，我们还是需要JS代码合并的功能。

    网上很多的JS文件合并工具，大致很两种。一种是在请求的url中提供一个文件列表，服务端会将文件进行合并后返回。一种是在服务端提供一个配置文件，定义了需要合并的文件，以及文件之间的依赖关系，服务端页面文件中嵌入一段特定的代码即可引人合并后的文件。

    第一种很简单，不是我们要讨论的话题。今天我们要讨论的是第二种。

    在第二种中，主要分两个部分：一个是需要合并的文件。这个也很简单，可以通过配置文件定义，指向各个需要合并的文件，也可以直接指定一个根目录，目录下的文件全部合并。第二部分是文件之间的依赖关系。一般的解决方法都是在配置文件中指定文件之间的依赖关系。但是这种制定依赖关系的做法，有以下几个问题：一是需要我们指定，二是每当增加新的文件或修改文件的时候，还需要我们更新依赖关系。

    想当初我们的产品中就有这样的问题。产品中前端部分分为开发模式和发布模式。开发模式下，直接加载了所有的JS文件。而在发布模式下，加载的是一个事先合并并压缩的文件。而压缩哪些文件，文件的先后顺序都是在一个文件中维护好的，压缩的时候执行一个批处理脚本就可以了。但是，由于这是一个手动执行的任务，做前端框架开发的也只有两个人，面对的也都是产品的开发人员，用的都是开发模式，因此发布模式下的文件合并压缩只有刚开始的时候做过，后来修改代码的时候根本就没有重新合并压缩。用到项目中的时候，用的也是开发模式。记得还有一个项目，用了发布模式，结果还不好使。

    这两天实现了第一种压缩，但是和同事的讨论结果是，第一种有用，但用处不大。第二种才是真正有用的。但怎么解决上面提到的问题呢。怎么能够自动的对文件进行合并和压缩，并且能够自动的分析文件之间的依赖关系呢。

    首先说第一个问题，自动对文件进行压缩。这个只要在系统启动的时候执行就可以了，并且可以加入参数配置是否压缩，是否检测文件更新等。

    第二个问题，自动分析文件之间的依赖关系。我们不想去维护依赖关系，而是自动分析文件之间的依赖关系。这个乍看起来有点难度，但是不论是第三方的框架，还是我们自己写的框架。当我们一个写组件的时候，其实我们都会定义这个组件依赖哪些其他的组件。这样，框架在执行的时候才会自动的加载被依赖的组件。如Ext中定义一个组件，我们需要通过extends声明继承自哪个组件，通过requires声明依赖哪个组件。Ext在执行的时候会自动帮我们去加载对应的组件。基于这一点，就有了下面的解决方案。

    做测试的时候，我们需要写一些mock类，我们的解决方案也是通过mock来实现的。例如在Ext中，我们定义一个组件如下：

Ext.define('KitchenSink.view.grid.GroupedHeaderGrid', {
    extend: 'Ext.grid.Panel',
    ......
})

    通过mock的方式，我们自己实现一个Ext.define，只需要在里面记录一下组件的名称，extends的名称，然后运行一下组件，即可得到该组件的名称和依赖的组件名称。

    基于以上所述，我们只需要遍历所有的文件，并用我们的mock为基础，运行所有的组件，即可得到所有组件以及组件之间的依赖关系。然后根据依赖关系计算出组件的加载顺序。最后根据顺序合并所有的文件即可。

转载于:https://my.oschina.net/mycybyby/blog/129099