简介
在前端开发中，我们经常需要构建项目，生成必要的项目结构和资源文件。为了提高前端开发的效率，@dhis2/cli-helpers-template 库应运而生。这个 npm 包可以通过命令行创建现代化的项目模板和各种代码片段。
安装和初始化
首先，我们需要安装 @dhis2/cli-helpers-template 这个依赖包。在终端中使用以下命令进行安装：
// 在全局环境中安装 npm install -g @dhis2/cli-helpers-template // 或者在局部环境中安装，在项目目录中运行以下命令 npm install --save-dev @dhis2/cli-helpers-template
安装完成后，我们可以使用以下命令来初始化一个项目：
dhis2 create <template-name>
其中 <template-name> 为指定的项目模板名称。比如，我们可以使用以下命令来创建一个 React 项目：
dhis2 create react
在创建过程中，我们可以根据提示输入项目名称、项目描述等信息来定制化项目。
初始化完成之后，我们可以打开项目文件夹，看到在根目录下已经有了基础的项目结构和已经安装好的依赖项。我们可以使用以下命令进入项目：
cd <project-name>
使用指南
文件结构
在使用 @dhis2/cli-helpers-template 创建项目时，我们可以看到项目目录的基础结构如下：
|--src/ // 存储项目源文件 | |--index.html // 项目主页面 | |--index.js // 项目主入口文件 |--package.json // 项目依赖和脚本配置文件 |--README.md // 项目说明文档
其中 src 文件夹存储项目源代码，index.html 是项目主页面，index.js 是项目的主入口文件。package.json 文件是项目的配置文件，里面存储了项目的依赖和脚本配置。README.md 文档是项目的说明文档。
命令行工具
@dhis2/cli-helpers-template 还提供了一些命令行工具，方便我们快速生成各种常用的代码片段和文件。以下是常用的指令：
生成组件
dhis2 generate [component] <name>
其中，component 为可选的关键字，用于指定生成的文件类型，name 为要生成的组件名称。
生成组件时有两个选项，可以选择生成 .jsx 和 .scss 文件：
dhis2 generate component <name> --with-styles
生成 container
dhis2 generate [container] <name>
其中，container 为可选的关键字，用于指定生成的文件类型，name 为要生成的 container 名称。
生成 container 时同样可以选择生成 .jsx 和 .scss 文件：
dhis2 generate container <name> --with-styles
生成模块
dhis2 generate [module] <name>
其中，module 为可选的关键字，用于指定生成的文件类型，name 为要生成的模块名称。
生成模块时会生成一个由 container 及其子组件组成的模块结构，并且同样可以选择生成 .jsx 和 .scss 文件：
dhis2 generate module <name> --with-styles
执行脚本
@dhis2/cli-helpers-template 还提供了一些执行脚本的工具，可以快速启动、编译项目等。以下是常用的指令：
启动应用
npm start
该命令可以在开发环境下启动项目，并且在代码发生变化时进行热更新。开发时请使用此命令。
打包应用
npm run build
该命令可以打包项目，并将打包后的文件存储在 ./build 目录下。生产环境下请使用该命令。
运行测试
npm test
该命令运行测试。在编写代码时推荐使用该命令进行单元测试。
实例展示
在本实例中，我们使用了 @dhis2/cli-helpers-template 库创建了一个 React 项目，并生成了一个名称为 HelloWorld 的组件。
@dhis2/cli-helpers-template 的安装
为了使用 @dhis2/cli-helpers-template，我们需要先进行安装：
npm install -g @dhis2/cli-helpers-template
项目初始化
使用以下命令创建一个 React 项目：
dhis2 create react
然后，在项目根目录下输入以下命令安装 React：
npm install --save react react-dom
生成组件
输入以下命令生成一个名为 HelloWorld 的组件：
dhis2 generate component HelloWorld --with-styles
执行完上述命令后，我们在 ./src/components 目录下会看到一个新的 HelloWorld.js 文件和 HelloWorld.scss 文件。
HelloWorld.js 文件内容如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ ------ ---- ---------------------------
----- ---------- - -- -------- -- -- -
------ -
-----
--- ------------------------------------------
------
--
--
-------------------- - -
--------- ----------------------------
--
------ ------- -----------HelloWorld.scss 文件内容如下：
.heading {
color: red;
}使用组件
在 App.js 文件中，我们可以使用 HelloWorld 组件。首先，将 App.js 文件中的内容替换为以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- -------------------------------------
----- --- - -- -- -
------ -
-----
----------- ---------------- ------- --
------
--
--
------ ------- ----在命令行窗口中输入以下命令启动应用程序：
npm start
在浏览器中访问 http://localhost:3000，您应该能够看到一个显示“Hello, world！”字符的绿色标题。
到这里，我们已经完成了使用 @dhis2/cli-helpers-template 初始化项目和生成组件的操作，并展示了如何使用生成的组件。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedae1db5cbfe1ea0610d7d