在现代的前端开发中，使用单页应用程序（Single Page Application, SPA）已经成为了一种非常普遍的方式。而 SPA 的开发通常需要使用 js 打包工具来减少请求数量，例如 webpack 等，这些工具比较难以入门，且需要一定的配置。
好在有一些厂商为此提供了自己的解决方案，例如阿里云为其官方 mPaaS 提供了名为 spa-bundler 的 npm 包，具有配置简单，易于上手等优点。下面就是详细的使用教程。
安装
首先，在命令行中使用 npm 安装 spa-bundler：
npm install @ali/universal-spa-bundler --save-dev
接着，在 package.json 中添加一个名为 build 的 script，设置启动命令如下：
{
"scripts": {
"build": "node node_modules/@ali/universal-spa-bundler --cwd=./src --output=./dist"
}
}上面的配置中，--cwd 的值是待打包文件的根目录，--output 为打包后输出的目录。
配置
spa-bundler 的默认配置足以满足大部分需求，但如有必要，也可以针对目标进行自定义配置。首先，需要在项目根目录下新建一个名为 spa.config.js 的配置文件，通常包含以下几个部分：
- 根据入口文件打包生成的文件名及路径
- 入口文件列表及路径
- 静态文件列表及路径
- 资源映射表，解决 cdn 加速及上线后的静态资源缓存问题
- cdn 资源上传配置
下面是一个示例配置文件：
-- -------------------- ---- -------
-------------- - -
----------------- ----
------------------- ---------
-------- -
------ -
-- --------
------ -----------------
--------- -------------------
--------- -------------
-------- ---------------
-
--
-- ----
------------- -
-- --------------- ---- --
----- ------------------- -------------------
-- ---- ------
--- ---------
------- -----
--
-- ----
------ -
----- ----------------------
---- -----
--
-- ------
-------- -
----------- ------- ------- -------- ------ -------
--
-- ----
-------- -
---------- -
-- ------
-------- -
------ ------ -- -- ---- ---------
----- ------------------------- ------------------------
-
-
--
-- -----
---- -
-- ---- ------ --
------- ---
-- ---------- ----------------- --- ---
------------ -
------------ ---
---------------- ---
--
-- - ------ ---------------- ------- -
------- ---
-- ---
-------- ---
-- --- --
---- ---
-- -------------------
---------------- --
-
-此外，在某些情况下，还可以在 spa.config.js 中添加一些插件，在打包的过程中对文件进行一些处理。
-- -------------------- ---- -------
-------------- - -
-------- -
-- ----
------ -
-
-- --------------
----- ----------
-- ---------
-------- -
------ -
-
-------- ------------
-- --- --- ----
-------- -------------------------------
-
-
-
-
-
-
-代码中的 replace 插件可以在将目标代码发布到 cdn 上之前，将本地资源引用路径替换成 cdn 的路径。
以上是 spa-bundler 的基本用法和配置，无论是用于具体项目中还是作为实践学习都具有丰富的意义，在前端开发中推荐使用。
示例代码
下面是示范项目根目录下的 spa.config.js 文件：
-- -------------------- ---- -------
----- ---- - ---------------
-------------- - -
-- ----------
------------------- ---------
-- ---------
----------------- ----
-- ------
-------- -
----- -
------ ----------------
--------- -------------------
--------- -------------
-------- ---------------
-
--
-- ------
------------- -
----- ------------------- -------------------
--- ---------
------- -----
--
-- ----
------ -
----- ----------------------
---- -----
--
-- ------
-------- -
----------- ------- ------- -------- ------ -------
--
-- ----
-------- -
---------- -
-------- -
-- -- ----- --------------
------ ------
----- ------------------------- ------------------------
-
-
--
---- -
------- ---
------------ -
------------ ---
---------------- ---
--
------- ---
-------- ---
---- ---
-- -------------------
---------------- ---------------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055da781e8991b448db698