在前端开发过程中,我们经常需要创建一个基础的项目结构和配置,用于开发新的应用或组件。使用 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