前言
在现代化的前端开发中，往往会使用到众多的 npm 包来满足我们的需求。如何高效地开发和使用这些 npm 包成为了前端工程师需要面临的问题之一。
其中，@sage-cli/plugin-setup 是一个非常有用的 npm 包，它可以辅助我们更快速、规范化地创建新项目或新功能模块。在本文中，我们将介绍如何使用该 npm 包。
什么是 @sage-cli/plugin-setup
@sage-cli/plugin-setup 是一个集成了常见的技术栈和工具链的脚手架。它可以帮助我们快速创建新项目或新功能模块，并提供了一套规范的开发流程、文件结构、配置文件等等。
@sage-cli/plugin-setup 中集成了以下技术栈和工具链：
- React
- TypeScript
- Webpack
- Babel
- ESLint
- Prettier
- Husky
- Commitlint
- Stylelint
- PostCSS
- Jest
- Enzyme
- React Testing Library
- Storybook
通过使用 @sage-cli/plugin-setup，我们可以大大减少创建项目时的工作量，避免了重复造轮子的问题，同时也能够让我们的项目具有更好的工程化和规范性。
如何使用 @sage-cli/plugin-setup
安装
在使用 @sage-cli/plugin-setup 之前，我们需要先安装它。在终端中执行以下命令即可：
npm install -g @sage-cli/plugin-setup
创建项目
使用 @sage-cli/plugin-setup 创建项目非常简单，我们只需要在终端中执行以下命令：
sage create [projectName]
其中，[projectName] 是你要创建的项目名称，例如我们要创建一个名为 my-project 的项目，那么可以执行以下命令：
sage create my-project
执行命令后，@sage-cli/plugin-setup 将会自动创建一个名为 my-project 的项目，并进行一系列的配置和安装工作。
目录结构
@sage-cli/plugin-setup 创建的项目的目录结构如下所示：
-- -------------------- ---- ------- ---------- --- ------------ --- ------ - --- ----------- - --- ---------- - --- ------------- --- --- - --- ---------- - --- ----- - --- ------ - --- ----- - --- ------- - --- --------- - --- ------------------ --- ----- --- -------- --- ---------------- --- ------------- --- ------------ --- ---------- --- ----------- --- ---------------- --- ------ --- ----------------- --- --------- --- ------------- --- ----------- --- ----------------- --- ---------
其中，node_modules 是我们项目依赖的各种 npm 包，public 中保存了前端项目的公共文件，src 中保存了项目的源代码，tests 中保存了测试代码。
运行项目
创建项目后，我们就可以通过以下命令运行项目：
cd my-project yarn start
这个命令会启动一个本地服务器，打开浏览器访问 http://localhost:3000，就可以看到我们的项目已经运行起来了。
添加新功能模块
除了创建整个项目，@sage-cli/plugin-setup 还可以帮助我们快速创建新的功能模块。在项目根目录下，我们可以执行以下命令：
sage add [componentName]
其中，[componentName] 是你要创建的组件名称。例如，我们要创建一个名为 my-component 的组件，可以执行以下命令：
sage add my-component
@sage-cli/plugin-setup 将会自动在 src/components 中创建一个 my-component 文件夹，并生成 my-component 组件的代码和测试代码。
总结
@sage-cli/plugin-setup 是一个非常有用的 npm 包，它可以帮助我们更快速、规范化地创建新项目或新功能模块，提高我们的工作效率。在使用前，我们需要先安装它，然后就可以通过简单的命令来创建项目或者添加新的功能模块了。本文详细介绍了如何使用 @sage-cli/plugin-setup，并给出了相应的示例代码，希望能帮助大家更好地使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067359890c4f7277583e54