Skip to main content

自定义模板

注意： react-scripts@3.3.0 及更高版本提供此功能。

自定义模板使你能够选择一个模板来创建你的项目，同时仍然保留 Create React App 的所有功能。

你会注意到自定义模板始终以 cra-template-[template-name] 格式命名，但你只需将 [template-name] 提供给创建命令即可。

还支持范围模板，名称为 @[scope-name]/cra-template 或 @[scope-name]/cra-template-[template-name]，可分别通过 @[scope] 和 @[scope]/[template-name] 安装。

npx create-react-app my-app --template [template-name]

查找自定义模板​

我们默认提供两个模板：

但是，你可以通过在 npm 上搜索 "cra-template-*" 找到许多很棒的社区模板。

构建模板​

如果你对构建自定义模板感兴趣，请先看看我们是如何构建 cra-template 的。

模板必须具有以下结构：

cra-template-[template-name]/
  README.md (for npm)
  template.json
  package.json
  template/
    README.md (for projects created from this template)
    gitignore
    public/
      index.html
    src/
      index.js (or index.tsx)

测试模板​

要在本地测试模板，请使用 file: 前缀将文件路径传递到模板源目录。

npx create-react-app my-app --template file:../path/to/your/template/cra-template-[template-name]

template 文件夹​

当 Create React App 安装时，此文件夹将复制到用户的应用程序目录。 在此过程中，文件 gitignore 被重命名为 .gitignore。

你可以在此处添加任何你想要的文件，但你必须至少具有上面指定的文件。

template.json 文件​

这是你的模板的配置文件。 由于这是一项新功能，因此会随着时间的推移添加更多选项。 目前，仅支持 package 密钥。

package 键允许你提供要添加到新项目的 package.json 的任何键/值，例如依赖项和你的模板所依赖的任何自定义脚本。

下面是一个示例 template.json 文件：

{
  "package": {
    "dependencies": {
      "eslint-plugin-jsx-a11y": "^6.2.3",
      "serve": "^11.2.0"
    },
    "scripts": {
      "serve": "serve -s build",
      "build-and-serve": "npm run build && npm run serve"
    },
    "eslintConfig": {
      "extends": ["react-app", "plugin:jsx-a11y/recommended"],
      "plugins": ["jsx-a11y"]
    }
  }
}

你为 "dependencies" 和 "scripts" 添加的任何值都将与 Create React App 默认值合并。 任何其他键的值将按原样使用，替换任何匹配的 Create React App 默认值。

为了方便起见，我们总是在你的自定义 "scripts" 中将 npm run 替换为 yarn，以及在使用 yarn 初始化项目时在你的 README 中。