介绍
在现代前端开发中，构建工具的使用已经成为了必要的技能。而搭建工程化的项目结构也是其中的重要部分。@hokid/generator-userfy 正是为了方便前端开发者快速搭建项目结构而生的一个 npm 包。本文将详细介绍如何使用该 npm 包。
安装
yarn global add yo @hokid/generator-userfy
或
npm install -g yo @hokid/generator-userfy
使用
在命令行中运行以下命令：
yo @hokid/userfy
这时候就可以看到 Userfy 能够生成的模板列表了。选择你想要生成的模板，然后根据提示进行配置就行了。
模板目前提供了 React、Vue、Angular 三种框架的脚手架模板，以及基于 webpack 和 webpack-dev-server 的基础模板。
配置
在生成模板时，Userfy 会要求你对一些基础配置进行设定。以下是各个配置项目的详细介绍。
项目名称
设置你的项目名称，将会作为项目文件夹的名称。
项目描述
简要描述你的项目，会在 package.json 中体现。
作者
填写你的名字或公司名称，会在 package.json 中体现。
选择模板
从列表中选择所需的模板类型。
开启 Jest 单元测试？
是否开启 Jest 单元测试，这样能够让你的项目拥有更加稳定的质量。
选择 CSS 预处理器
选择你常用的 CSS 预处理器类型。
使用 ESLint？
是否开启 ESLint 规范你的代码风格，这能够让你的代码更加规范，让团队协作更加顺畅。
是否使用 Prettier？
Prettier 是一个代码格式化工具，在代码提交的时候统一代码格式，能够极大提高代码的可读性。
安装依赖？
Userfy 会为你自动安装一些必须的依赖。
示例代码
下面是一个使用 Userfy 模板生成的 React 项目的示例代码，你可以通过这份代码来学习如何使用 Userfy 构建项目：
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));src/App.js
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------
-------- ----- -
------ -
---- ----------------
---------- -----------
------
--
-
------ ------- ----src/App.test.js
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- -------- ----------- ------- ---------- -- -- - ----- --- - ------------------------------ -------------------- --- ----- ------------------------------------- ---
结语
通过使用 Userfy，我们可以非常方便地构建起大型 Web 应用程序的项目结构，让我们能够更好地集中精力在业务逻辑的实现上。而本文也详细介绍了 Userfy 的使用方法和配置，相信你已经可以愉快地使用 Userfy 进行项目构建了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f91238a385564ab6fb0