自定义模板
注意：此功能在
[email protected]及更高版本中可用。
自定义模板使您可以选择一个模板来创建您的项目，同时保留 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" 中以及在使用 yarn 初始化项目时在您的 README 中将 npm run 替换为 yarn。