在前端开发过程中，我们经常需要创建一个基础的项目结构和配置，用于开发新的应用或组件。使用 create-stem-app 可以帮我们快速搭建一个基础的 React 项目结构和配置，以节约建立项目的时间和精力。
本文将介绍如何使用 create-stem-app 以及如何自定义和使用它所提供的特性。
安装
npm install -g create-stem-app
使用
- 使用 create-stem-app 命令来创建一个新的基础项目
create-stem-app my-app
- 进入新建的项目目录并启动开发服务器
cd my-app npm start
当你的应用启动，你可以在你的浏览器中访问 http://localhost:3000 来预览。
此时，在 my-app 目录下的文件结构如下：
-- -------------------- ---- ------- ------ --- ------------ --- ------ - --- ---------- - --- ----------- - --- ------------- --- --- - --- ------ - --- ----------- - --- --------- - --- -------- - --- -------- - --- ---------------- --- ---------- --- ----------------- --- ------------ --- ---------
自定义配置
create-stem-app 对于项目提供了一些配置选项，可以通过使用以下命令来查看：
create-stem-app --help
你可以通过传递 --config 选项来使用一个自定义配置文件。
create-stem-app my-app --config my-config.js
默认情况下，create-stem-app 使用了一个被称为 stem.config.js 的配置文件来创建新应用程序。这个文件位于新建项目的根目录下，你可以通过修改里面的配置来自定义你的应用。
以下是一个示例配置文件：
-- -------------------- ---- -------
-------------- - -
---------------- -------------- -------------------
--------- -
-
----- -------------
------------- ---------------
---------------- ----------------
--
-
----- ------------------
------------- -------------------------- -----------------------------
-------- -
----- -------------- ---- ------------
-
-
--
-------- -
----- ------- -----
-
--这个配置文件中包含了两个内置的特性：typescript 和 testing-library。你可以添加更多的特性。
在配置文件中，你可以使用如下字段：
defaultFeatures(Array): 包含了默认的特性列表，默认为 ["material-ui"]features(Array): 包含了特性对象列表scripts(Object): 设置工具集的scripts字段
特性对象有以下字段：
name: 特性名称dependencies:dependencies字段下可安装的npm包devDependencies:devDependencies字段下可安装的npm包scripts:starting script元数据
定制开发脚本
create-stem-app 使用 react-scripts 来管理和组织开发过程。react-scripts 内置了许多开发工具，比如开发服务器，ESLint 配置，样式表预处理器等。如果你需要修改这些工具集的行为，可以创建一个 .env 文件来控制它们的选项。
以下是三个用于 react-scripts 的可以配置的环境变量：
BROWSER: 用于指定开发服务器启动时使用的浏览器（可选值目前为：none，firefox，chrome，safari，opera，edge，electron等）PORT: 指定程序运行时所用的端口号HTTPS: 设置开发服务器是否启用 HTTPS
以下是一个示例 .env 文件：
BROWSER=firefox HTTPS=true
结论
create-stem-app 提供了一种简单的方法来快速启动新的项目和定制化配置。不仅如此，在尝试新的库和新的概念时，你可以使用它来快速地编写示例代码。这个工具已经被广泛使用并受到了非常好的评价，尽情使用吧！
完整源代码：create-stem-app
希望本文可以对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005538c81e8991b448d0bbd