本文学习使用nodejs实现css或js资源文件的合并请求功能，我们都知道在一个复杂的项目当中，可能会使用到很多第三方插件，虽然目前使用vue开发系统或者h5页面，vue组件够用，但是有的项目中会使用到类似于echarts这样的插件，或者第三方其他的插件，比如ztree.js这样的，那如果我们把所有js都打包到一个js文件当中，那么该js可能会变得非常大，或者我们可能会把他们单独打包一个个js文件去，然后在页面中分别一个个使用script标签去引入他们，但是这样会导致页面多个js请求。因此就想使用node来实现类似于combo功能，比如以下的js功能构造：
http://127.0.0.1:3001/jsplugins/??a.js,b.js
如上的js请求，会把a.js和b.js合并到一个请求里面去， 然后使用node就实现了combo功能。
首先我们来分析下上面的请求，该请求中的 ?? 是一个分隔符，分隔符前面是合并的文件路径，后面是合并资源文件名，多个文件名使用逗号(,)隔开，知道了该请求的基本原理之后，我们需要对该请求进行解析，解析完成后，分别读取该js文件内容，然后分别读取到内容后合并起来输出到浏览器中。
首先看下我们项目简单的目录架构如下：
### 目录结构如下： demo1 # 工程名 | |--- node_modules # 所有的依赖包 | |--- jsplugins | | |-- a.js | | |-- b.js | |--- app.js | |--- package.json
项目截图如下：
jsplugins/a.js 内容如下：
function testA() { console.log('A.js'); }
jsplugins/b.js 内容如下：
function testB() { console.log('b.js'); }
当我们访问 http://127.0.0.1:3001/jsplugins/??a.js,b.js 请求后，资源文件如下：
如何实现呢？
app.js 一部分代码如下：
// 引入express模块const express = require('express'); const fs = require('fs'); const path = require('path'); // 创建app对象const app = express(); app.use((req, res, next) => { const urlInfo = parseURL(__dirname, req.url); console.log(urlInfo); if (urlInfo) { // 合并文件 combineFiles(urlInfo.pathnames, (err, data) => { if (err) { res.writeHead(404); res.end(err.message); } else { res.writeHead(200, { 'Content-Type': urlInfo.mime }); res.end(data); }
