简介
tdunn-scripts 是一个基于 create-react-app 的 npm 包，它提供了一组定制化的脚本和配置文件，可以快速搭建一个 React 应用程序的开发环境。
安装
在执行下面的命令之前，请确保已经安装了 Node.js 和 npm。
npm install -g create-react-app npm install -g tdunn-scripts
创建项目
创建一个基于 tdunn-scripts 的 React 应用程序和创建一个基于 create-react-app 的应用程序是一样的，我们只需要运行以下命令：
create-react-app my-app --scripts-version tdunn-scripts
运行此命令后，它将创建一个名为 my-app 的目录，并在其中初始化一个新的 React 项目。
配置文件
不同于 create-react-app 的官方模板，tdunn-scripts 提供了一些额外的配置文件以及自定义的脚本工具。
.env 文件
.env 文件一般用于存储环境变量，例如后端 API 的地址或者其他应用程序全局的配置信息。
REACT_APP_API_BASE_URL=http://localhost:8080/api
我们可以在代码中通过读取 process.env 对象来使用这些环境变量：
const apiUrl = process.env.REACT_APP_API_BASE_URL;
注意：必须以 "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
