在前端开发中，需要建立一些原型来用来验证或演示设计，这就需要快速创建一个基础的工程，然后进行自定义的开发，过程中需要引入使用灵活。在这种场景下，就可以使用 slush-prototype 这个 npm 包来快速创建模版项目。
本篇文章将介绍 slush-prototype 的使用方法，并提供一些示例代码，希望能够对前端开发工程师有所指导。
slush-prototype 的介绍
slush-prototype 是一个 slush generator，它可以快速生成基础的项目模板，包括集成了常用的工具和框架：
- gulp
- webpack
- babel
- eslint
- postcss
同时还集成了基础的 npm scripts，如：serve、build、test。
slush-prototype 的安装
使用 slush-prototype 之前需要安装 slush。
npm install -g slush
然后安装 slush-prototype:
npm install -g slush-prototype
slush-prototype 的使用
在一个空的文件夹中，输入以下命令：
slush prototype
然后，就可以根据提示输入项目名称、作者、Your Website 等信息，最后选择想要的技术栈和配置即可。
通过上述命令会生成一个类似下面这个样子的基础项目：
-- -------------------- ---- ------- - --- --- - --- ------ - --- ---------- - --- ------- - --- ------ --- --------- --- ----------------- --- ------------ --- ----------- --- ----------------- --- -------- --- ------------- --- -------------
示例代码
自定义 webpack 配置
如果您需要自定义 webpack 配置，可以通过创建配置文件 webpack.config.extend.js 来实现，例如：
// webpack.config.extend.js
module.exports = function(config, webpack) {
// 你的 webpack 配置
return webpackConfig
}使用以上配置文件后，在生成项目时选择 webpack-extend 即可。
多入口配置
你可以指定多个入口，通过创建配置文件 pages.config.js 来实现，例如：
-- -------------------- ---- -------
-- ---------------
-------------- - -
-
------- -------------
------ -----------------
------ -----
--
-
------- -------------
------ -----------------
------ -------
--
-- ---
-使用以上配置文件后，在生成项目时选择 multi-pages 即可。
使用 sass
你可以使用 sass 代替原生 css，只需要在选择 css 预处理器时选择 sass，然后在 styles 文件夹中创建 sass 文件即可。
使用 postcss
你可以使用 postcss 工具处理 css 文件，只需要在生成项目时选择 postcss，然后在 postcss.config.js 中书写你的 postcss 配置代码即可。
module.exports = {
plugins: [
require('autoprefixer')
]
}总结
slush-prototype 是一个可以快速创建基础项目模版的 npm 包，在前端项目开发中能够很好地应用于原型开发、演示、验证等场景，减少了开发者的不必要工作量，提高了效率。本文对 slush-prototype 的使用方法进行了详细介绍，并且给出了一些示例代码，希望能够对前端开发工程师有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005558681e8991b448d2ae7