纯TypeScript开发Web前端（四）静态资源打包
接上回的话题，说到了发布项目的时候需要能把N个TS模块所编译的N个js文件打包起来。其实，主流的web前端框架都有这一环节，大家熟知的 Webpack 或者 Grunt，都是用来干这事的，也都几乎都成了项目脚手架模板的标配。
我选的打包方式还是依旧走非主流路线，用的是require.js官方出品的r.js，理由是配置简单功能不弱，跟require.js高度兼容。
r.js安装
首先，做个传送门：r.js
然后，我就很顺手的把github上的readme给复制粘贴过来算了。
- 安装node.js（唉~~千方百计还是绕不过这座大山）
- 安装require.js
npm install -g requirejs
- 下载r.js，就是把下面这个文件下载到本地
打包js
-
把r.js复制到需要打包的js目录下
-
创建一个打包配置文件config.js，参考格式：
({
baseUrl: "./",
paths: {
"marked": "../js/lib/editor/marked.min"
},
dir: "./build",
modules: [
{
name: "app",
exclude: ["jquery","marked"]
}
]
})
配置参数的详解麻烦自己去百度找。我这个例子中用到的参数其实都挺好理解的，我只说一下可能会有点坑的。
-
modules是一个数组，如果应用不止一个入口，那么可以配置多个。比如前台入口叫app.js，后台则是admin.js。那么modules就需要分开做配置。 -
exclude将第三方js库排除掉。不然的话全打包进去了，就臃肿不堪了。 -
第三方的库分本地引用和url引用，说到这需要回顾一下require.config了。
require.config({
paths: {
'jquery': '//g.alicdn.com/sj/lib/jquery/dist/jquery.min',
'marked': '/js/libs/marked.min'
}
})
jquery属于url引用，marked属于本地引用。因为r.js必须把所有引用的文件都凑到一起，才能进行打包，无论是否exclude排除掉，都缺一不可。本地的无所谓，打包的时候会被copy过去撑一下场子。
但是，通过外部url引用的库就麻烦一点，所以我需要随便弄一个jquery.js文件过去baseUrl的目录，文件内容为空也无所谓，但是的有这个文件。不然执行脚本会报错，说找不到文件。
- 执行脚本
node r.js -o config.js
执行完毕在build目录下，我们就可以找到打包好的app.js了。
另外，有一点要特别注意的：用了ES6语法的js，没法用r.js进行打包。如果需要用这个方案的麻烦降级到ES5。
打包css
r.js除了打包脚本还能打包压缩css。那就顺便说一下，凑凑字数吧~
node r.js -o cssIn=index.css out=built/index.css
这个命令很简单，只是原文件的输入和打包文件的输出。如果需要把多个css打包成1个，也是有办法的。
首先，建立一个all.css作为入口，然后按顺序把多个css引用进来。然后，直接打包all.css就可以了。
@import url("login.css");
@import url("user.css");
@import url("product.css");
@import url("app.css");
后记
r.js的打包发布就先说到这里。其实，真正项目发布还是需要再另外写一个批处理的脚本，一键完成，包括前后端的代码编译和打包发布。只不过，我的脚本不具代表性，就费事拿来出献丑了。
