介绍
boxspring-pages是一个能够帮助开发者快速搭建一个简易的多页面应用的NPM包，支持handlebars模板引擎和SCSS预处理器，内置了热加载和Babel转译，旨在帮助开发者快速开发一个高质量的多页面应用。
在使用此包之前，请确保你已经熟练掌握 npm、Node.js、webpack 和 Babel 等技术。
安装
首先，你需要在Node.js的环境下使用npm包管理器安装boxspring-pages。
npm install boxspring-pages --save-dev
如何使用
初始化项目
在安装好boxspring-pages之后，在你想要创建你的项目的目录下运行以下命令：
bsp init
这将会在当前目录下创建一个名为src的文件夹，用于存储项目的源代码。同时，bsp init命令还会创建一个名为webpack.config.js的文件，用于配置webpack打包。
创建页面
在src文件夹下面创建你的第一个页面。页面文件名必需以.hbs为扩展名，比如：index.hbs。在这个文件中，你可以使用handlebars语法来编写页面的模板代码。比如，下面是一个简单页面的示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- ----- ---------- ----- ---------------- -------- ------ ------------------ ------- ------ ------ ----- ------- ----- ------- ------ ------- ------- ------ ------------------------- ------- -------
创建 SCSS 样式文件
在src文件夹下创建一个新的名为style.scss的文件。这将是项目的样式文件，这个文件中我们可以使用SCSS来编写我们的样式代码。由于webpack默认并不支持SCSS文件，所以需要进行特定的配置来实现对SCSS的支持。在你的webpack.config.js文件中加入以下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-- ------- --- ---- ------
-
----- -----------------
---- -
---------------
-------------
-------------
-
-
-
-
-- ---
-这个配置告诉webpack当它遇到以.sass或.scss为扩展名的文件时，要将这些文件通过SCSS预处理器并插入到html中。
创建 javascript 文件
在src文件夹下创建一个名为index.js的文件，作为项目的入口文件。这个文件会通过Webpack打包成bundle.js的输出文件。你可以使用ES6或者TypeScript来编写你的JS代码，在Webpack的配置中已经加入了对需要转译的语法进行转换，因此你可以放心使用各种先进的语法特性。
配置打包
bsp提供了默认的打包工具webpack，我们可以在webpack的配置文件webpack.config.js中进行自定义的打包配置。比如，下面就是一个基本的打包配置：
-- -------------------- ---- -------
--- ---- - ----------------
--- ------- - -------------------
-- ----
--- ------- - -------------------- -------
--- --------- - -------------------- --------
-------------- - -
------ ------- - ------------ -- -----------
------- -
----- ---------- -- ---------
--------- ----------- -- ----
--
------- -
------ -
-- ----------
-
----- --------
------- ---------------
-------- ---------
--
-- ---- ------
-
----- -----------------
---- -
---------------
-------------
-------------
-
--
-- ---------- ---------
-
----- ---------
------- --------------------
-------- ---------
--
-- ------
-
----- -----------------------
-------- ----------
------- --------------
-------- -
----- ----------------------
----------- ---
-
-
-
-
-运行
在你的终端中运行以下命令：
bsp run
这将会启动你的应用服务，并在浏览器中打开 http://localhost:8080。当你对页面文件、样式文件或 JS 文件进行修改之后，应用会自动重新编译并在浏览器上重新渲染。
结语
boxspring-pages是一个非常有用的NPM包，通过使用boxspring-pages，你可以快速搭建一个简单的多页面应用并进行高质量的开发。在阅读本篇文章后，你应该已经了解了如何使用boxspring-pages，并且可以开始使用它开发自己的多页面应用了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c84ccdc64669dde4e95