Skip to main content

自定义模板

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

¥Note: this feature is available with react-scripts@3.3.0 and higher.

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

¥Custom Templates enable you to select a template to create your project from, while still retaining all of the features of Create React App.

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

¥You'll notice that Custom Templates are always named in the format cra-template-[template-name], however you only need to provide the [template-name] to the creation command.

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

¥Scoped templates are also supported, under the name @[scope-name]/cra-template or @[scope-name]/cra-template-[template-name], which can be installed via @[scope] and @[scope]/[template-name] respectively.

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

查找自定义模板​

¥Finding custom templates

我们默认提供两个模板：

¥We ship two templates by default:

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

¥However, you can find many great community templates by searching for "cra-template-*" on npm.

构建模板​

¥Building a template

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

¥If you're interested in building a custom template, first take a look at how we've built cra-template.

模板必须具有以下结构：

¥A template must have the following structure:

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)

测试模板​

¥Testing a template

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

¥To test a template locally, pass the file path to the directory of your template source using the file: prefix.

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

template 文件夹​

¥The template folder

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

¥This folder is copied to the user's app directory as Create React App installs. During this process, the file gitignore is renamed to .gitignore.

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

¥You can add whatever files you want in here, but you must have at least the files specified above.

template.json 文件​

¥The template.json file

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

¥This is the configuration file for your template. As this is a new feature, more options will be added over time. For now, only a package key is supported.

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

¥The package key lets you provide any keys/values that you want added to the new project's package.json, such as dependencies and any custom scripts that your template relies on.

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

¥Below is an example template.json file:

{
  "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 默认值。

¥Any values you add for "dependencies" and "scripts" will be merged with the Create React App defaults. Values for any other keys will be used as-is, replacing any matching Create React App defaults.

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

¥For convenience, we always replace npm run with yarn in your custom "scripts", as well as in your README when projects are initialized with yarn.