在前端领域，使用脚手架进行项目开发已经成为主流。其中，create-react-app 和 vue-cli 是最为常见的脚手架工具。但有时仅使用这些脚手架可能并不能完全满足我们的需求，因此，我们需要更加高度自定义的脚手架工具。本文会将介绍如何使用 create-react-boilerplate-temp 一步步构建我们自己的 React 项目模板。
什么是 create-react-boilerplate-temp
create-react-boilerplate-temp 是一个可分步式构建自己的 React 项目模板脚手架。它由一组列示的脚本配置组成，让我们可以轻松自定义代码库以符合自己的需求。create-react-boilerplate-temp 的优势在于，它提供了一些可以让你快速开始项目的基础组件，同时还为你提供了一系列的脚本配置进行自定义开发。
安装和用法
安装 create-react-boilerplate-temp 是很简单的，我们只需要在命令行中输入以下代码：
--- ----------------------------- ------ -- ------
这一串命令将在本地创建一个新的 React 项目，其中 npx 是 npm 5.2+ 中内置的一个工具，它可以直接运行 npm 包且不需要安装。运行以上命令后，你将得到一个基础的 React 项目模板。
项目目录结构
我们来看一下刚刚安装好的 React 项目的目录结构
--- ------------ --- ------ - --- ----------- - --- ---------- - --- ------------- --- --- - --- ------ - --- ---------- - --- ----- - --- ------ - --- ------ - --- ----------- - --- -------- - --- ---------------- - --- ------------- --- ---------- --- ------------ --- ---------
我们可以看到，这样的目录结构与 create-react-app 是非常相近的。
开始开发
你可以在 public/index.html 中修改网页标题和图标等元素。
在 src 目录下，我们可以看到基础文件已经被创建。我们在 App.js 文件中开始 React 开发，并且可以在终端输入 npm start 或 yarn start，来在浏览器中实时查看我们的开发进展。
例如，我们创建了一个 App 组件用来在浏览器中渲染 “Welcome to My App!” 的文本：
------ ----- ---- --------
-------- ----- -
------ -
-----
------- -- -- ----
------
--
-
------ ------- ----自定义配置
我们来研究一下 create-react-boilerplate-temp 的配置文件。所有的配置文件被存储在 config/ 文件夹内。使用 .env 文件控制环境变量，可以使用检查分支功能来检查代码库是否在特定分支部署，以及提供了一系列的脚本配置文件用于开发、生产等环境。
我们可以使用 config/webpack.config.js 文件进行自定义 webpack 配置。例如，我们可以配置 webpack 打包的文本资源限制为 10k：
-
----- ---------- --------- ----------- ----------
------- ------------------------------
-------- -
------ -- - -----
----- -------------------------------------
--
--线上构建后，我们可以通过引入 CDN 来加载静态资源：
----- --- - -------------------------------------------------- ----- --- - --- -------------- ---------------- ------------------------- - --- - --- - ----
结论
create-react-boilerplate-temp 能够为我们提供一个高度自定义的 React 项目模板，既提供了基础组件的功能，同时也让我们可以通过自定义配置文件获得更多开发自由。本文从基础使用、项目目录结构和自定义配置三个方面全面介绍了 create-react-boilerplate-temp 的使用方法，相信读者可以从本文学到足够的知识来进行自己的项目开发。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005552c81e8991b448d25fc