简介
tdunn-scripts 是一个基于 create-react-app 的 npm 包，它提供了一组定制化的脚本和配置文件，可以快速搭建一个 React 应用程序的开发环境。
安装
在执行下面的命令之前，请确保已经安装了 Node.js 和 npm。
--- ------- -- ---------------- --- ------- -- -------------
创建项目
创建一个基于 tdunn-scripts 的 React 应用程序和创建一个基于 create-react-app 的应用程序是一样的，我们只需要运行以下命令：
---------------- ------ ----------------- -------------
运行此命令后，它将创建一个名为 my-app 的目录，并在其中初始化一个新的 React 项目。
配置文件
不同于 create-react-app 的官方模板，tdunn-scripts 提供了一些额外的配置文件以及自定义的脚本工具。
.env 文件
.env 文件一般用于存储环境变量，例如后端 API 的地址或者其他应用程序全局的配置信息。
------------------------------------------------
我们可以在代码中通过读取 process.env 对象来使用这些环境变量：
----- ------ - -----------------------------------
注意：必须以 "REACT_APP_" 为前缀才能被识别。
.env.X 文件
为了支持不同环境下的不同配置，tdunn-scripts 支持多个 .env 文件。例如，我们可以为不同的环境（比如开发环境，测试环境和生产环境）使用不同的配置文件。
默认情况下，tdunn-scripts 使用 .env 文件，而 .env.development 文件则用于开发环境，.env.production 文件则用于生产环境。
.editorconfig 文件
.editorconfig 文件定义了编辑器的一些基本规则，例如缩进类型、缩进空间数量等等。
在 tdunn-scripts 中，.editorconfig 的默认配置如下：
---- - ---- --- ------------ - ----- ----------- - - ----------- - -- ------- - ----- ------------------------ - ---- -------------------- - ----
我们可以在不同的编辑器中配置此文件，以确保所有的开发人员都遵循相同的编码规范。
package.json 文件
在 tdunn-scripts 中，package.json 文件的默认配置如下：
-
------- ---------
---------- --------
--------------- -
---------------------------- ----------
------------------------- ----------
------------------------------ ----------
-------- ----------
------------ ----------
---------------- -------
--
---------- -
-------- -------------- -------
-------- -------------- -------
------- -------------- -----
--
--------------- -
---------- -----------
--
--------------- -
------------- ------ - ------ --------- ----- - ------- --------- ----- - ------ ----------
-------------- ------ - ------ --------- ----- - ------- --------- ----- - ------ ---------
-
-可以看到，tdunn-scripts 集成了三个命令：start、build 和 test，并且依赖了一系列 React 相关的依赖库。
自定义 webpack
虽然 tdunn-scripts 提供了一些默认的 webpack 配置，但是我们有时候需要自定义它们，以满足我们的一些特殊需求。
为了解决这个问题，tdunn-scripts 提供了一个 eject 命令，该命令会将配置文件暴露出来，我们可以随意修改。
注意：一旦执行 eject 命令，tdunn-scripts 的维护将不再运行。因此，在 "eject" 之前，请务必慎重考虑您真正需要的所有功能和配置，以及长期维护的责任。
代码示例
这是一个基于 tdunn-scripts 的 React 组件示例：
------ ----- ---- --------
------ ---------------
------ ------- -------- ------------- -
------ -
------- ------------------ --------------------------
----------------
---------
--
-这里的 Button 组件与 Bootstrap 3 样式库的按钮样式类似，它接受两个 props：
- children：按钮的文本
- disabled：按钮是否禁用
总结
tdunn-scripts 提供了一个快速启动 React 应用程序的方法，它基于 create-react-app，提供了一组定制化的脚本和配置文件，可以大幅度提高 React 开发的效率。尽管有一些限制，但是它仍然是一个非常有用的工具，值得尝试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056ea481e8991b448e7702