在前端开发中，我们经常需要通过构建工具来对项目进行打包、编译、压缩等各种操作。而 Slush 是一个基于 Gulp 的脚手架工具，提供了一些便捷的生成器，可以帮助我们快速创建项目模板。而 @nhz.io/slush-um 是其中一款针对 UReact + MobX 项目的生成器，让我们可以用更加方便的方式来开发 React + MobX 应用程序。
安装
在使用 @nhz.io/slush-um 之前，需要先安装 Slush 和 Node.js，打开终端，执行以下命令即可：
npm install -g slush
Slush 是一个全局的 npm 包，所以我们需要使用 -g 参数进行全局安装。安装完成后，我们可以在终端中输入 slush 命令来测试是否安装成功。
接着，我们需要安装 @nhz.io/slush-um：
npm install -g @nhz.io/slush-um
在安装完成后，我们可以使用 slush um 命令来生成项目模板。
使用
使用 @nhz.io/slush-um 可以快速生成一个 UReact + MobX 项目的框架。执行以下命令来生成项目：
mkdir my-app cd my-app slush um
在项目生成器中，我们需要按照提示来输入相关信息，包括项目名称、描述、作者等信息。在输入完毕后，生成器会自动为我们创建一个基于 UReact + MobX 的项目模板。
目录结构
生成的项目模板目录结构如下：
-- -------------------- ---- ------- --- --- - --- --- - --- ------ - --- ---------- - --- ------ - --- ------ - --- ----- - --- ------ - --- -------- - --- ------ - - --- ------- - - --- ---- - - --- -------- - - --- ------- - --- ------ - --- ----- --- -------- --- ------------ --- --------- --- ---------- --- ----------------- --- ------------
src目录下是项目的源代码；src/api目录下是封装了一些接口的代码；src/assets目录下是项目使用到的一些资源，比如图片、字体等；src/components目录下是项目组件；src/config目录下是项目配置；src/models目录下是项目的数据模型；src/pages目录下是项目的页面；src/routes目录下是项目路由的配置文件；src/services目录下是项目的服务；src/stores目录下是 MobX 状态管理的数据存储；src/utils目录下是一些帮助函数。
打包发布
在完成代码编写后，我们需要将项目进行打包并发布到服务器上。在项目中，使用了 webpack 来进行打包。在项目目录中执行以下命令即可将代码进行打包：
npm run build
打包结果会存储在 dist 目录中。我们可以直接将 dist 目录的内容上传到服务器中即可。
在项目发布之前，我们需要修改 package.json 中的 name 和 version 字段。在修改完成后，执行以下命令即可发布项目到 npm 中：
npm publish
结语
通过使用 @nhz.io/slush-um，我们可以更加方便地搭建 UReact + MobX 项目的框架。同时，了解了如何打包发布项目。在实际项目开发中，我们可以根据自己的需求进行相关定制，提高代码的重用性和规范性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671381e8991b448e3641