构建您自己的 Create React App 模板

根据 create-react-app 文档，创建模板是react-scripts@3.3.0及更高版本才提供的功能。

使用 CRA（create-react-app）是快速便捷地启动 React 项目的方法。很可能，您在设置新项目时会使用一些自己常用的软件包和工具。

每次创建项目时都必须不断安装这些软件包和工具，这很麻烦，除非你的目标是专门学习如何设置 React 项目，否则没有必要总是这样做。

这时，CRA模板就派上用场了。通过创建自己的模板，您只需运行一个命令即可掌控所有功能。

概述

我们将逐步讲解如何创建一个非常基本的 CRA 模板，并将我们的模板发布到 npm，以便我们可以使用它并与其他人共享。

入门

进入你想存放模板的文件夹，然后打开终端并切换到该位置。

然后，您可以在终端中运行以下命令：

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

[template-name]应该将其更改为您的模板实际名称，并且必须遵循“模板名称”的命名规则cra-template-。您可以随意命名，只需确保它与已发布的模板不同即可。cra-template-custom-styled为了本文的演示，我已将其命名为“模板名称”。

CRA完成后，您可以进入应用程序并使用以下命令运行它：

cd cra-template-custom-styled
yarn start

现在我们有了一个简单的 CRA 项目，我们可以开始根据自己的喜好进行定制。

构建模板

我们先集中精力搭建模板结构，然后再添加我们想要的功能。

任何 CRA 模板的结构都如下：

cra-template
│ └───template
│   │   gitignore
│   │ 
│   └───public
│       │   ...   
│   └───src
│       │   App.js
│       │   App.test.js
│       │   index.css
│       │   index.js
│       │   ...   
│   package.json  
│   README.md
│   template.json

注意：如果以上内容让您感到困惑，您可以前往基础cra-template以获得更直观的文件和文件夹结构理解。

接下来，我们通过template在顶层创建一个文件夹，并将src和public文件夹都移动到该template文件夹​​内来构建我们的应用程序结构。

然后您可以将该.gitignore文件移动到template文件夹中。这样，我们还可以删除.文件开头的逗号，使其看起来像这样：gitignore。

为了避免歧义，gitignore文件名前面不应该有逗号。.

我们还可以删除该yarn.lock文件、package-lock.json根目录中的文件以及node_modules文件夹。

template.json最后一步是在项目根目录下创建一个文件，并将以下内容添加到该文件中：

{
  "package": {
    "dependencies": {
      "@testing-library/jest-dom": "^4.2.4",
      "@testing-library/react": "^9.3.2",
      "@testing-library/user-event": "^7.1.2",
      "react": "^16.13.1",
      "react-dom": "^16.13.1",
      "react-scripts": "3.4.1"
    }
  }
}

template.json我们将把所有软件包都存储在这个文件中。

添加依赖项

对于这个特定的模板，我们将使用 styled-components。

欢迎您使用任何您需要的依赖项。

让我们通过在文件中添加以下内容来添加 styled-components 和 babel 插件template.json：

"styled-components": "^5.1.1,"
"babel-plugin-styled-components": "^1.10.7"

注意：通常情况下，您应该将这些依赖项添加为开发依赖项，但 cra-templates 目前不支持使用开发依赖项。您可以点击此处了解更多原因。

我们之所以手动添加这些依赖项而不是安装它们，是因为一旦我们运行 CRA，它就会查看文件template.json并为我们下载列出的所有依赖项。

请务必使用 npm 快速搜索要添加的依赖项及其正确的版本号。

您的template.json文件现在应该如下所示：

{
  "package": {
    "dependencies": {
      "@testing-library/jest-dom": "^4.2.4",
      "@testing-library/react": "^9.3.2",
      "@testing-library/user-event": "^7.1.2",
      "react": "^16.13.1",
      "react-dom": "^16.13.1",
      "react-scripts": "3.4.1",
      "styled-components": "^5.1.1",
      "babel-plugin-styled-components": "^1.10.7"
    }
  }
}

添加 Babel 插件后，我们需要.babelrc在文件夹中创建一个文件template，并将以下内容添加到该.babelrc文件中：

{
  "plugins": ["babel-plugin-styled-components"]
}

编辑 package.json

创建模板时，package.json文件看起来会略有不同。让我们删除文件中的所有内容，并添加以下内容：

{
  "name": "cra-template-custom-styled",
  "version": "1.0.0",
  "keywords": [
    "react",
    "create-react-app",
    "template"
  ],
  "description": "My custom template for Create React App.",
  "main": "template.json"
  "repository": {
    "type": "git",
    "url": "https://github.com/facebook/create-react-app.git",
    "directory": "packages/cra-template"
  },
  "license": "MIT",
  "engines": {
    "node": ">=10"
  },
  "bugs": {
    "url": "https://github.com/facebook/create-react-app/issues"
  },
  "files": [
    "template",
    "template.json"
  ]
}

请确保名称字段填写的是您的模板名称。

在文件中package.json，您应该考虑修改描述以更好地匹配您的模板，并将 `<repository>` 更改url为您的存储库。您还可以添加一个author字段以及更多关键字，用于说明您添加的任何依赖项。

此文件中最重要的一行是“main”:“template.json”。如果没有这一行，您将无法成功发布模板。

自定义模板

除了你选择的依赖项之外，模板中包含的文件完全由你决定。

一般来说，CRA 会附带一些文件，但你最终很可能会把它们删除。

从现在开始，您可以自由地跟随操作，也可以自行创建/删除任何文件和文件夹。

进入src文件夹后，我删除了以下文件：

• App.css
• logo.svg
• serviceWorker.js

删除那些文件后，我已将App.js文件修改如下：

import React from 'react'
import styled from 'styled-components'

const App = () => (
  <AppContainer>
    <Intro>
       Welcome to my CRA-Template!
    </Intro>
  </AppContainer>
)

export default App

const AppContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;

  height: 100vh;
  background: #1d1f27;
`

const Intro = styled.p`
  font-size: 2.5vw;
  color: #ffff;
`

我还serviceWorker从index.js文件中删除了它。

我不多赘述了，因为只有你自己才知道如何根据自己的喜好定制模板。可能性无穷无尽！

发布模板

你需要一个 npm 账号才能发布你的模板。如果你还没有账号，请创建一个。

创建完成后，打开终端并使用以下命令登录 npm：

npm login

系统会提示您输入信息。完成后，您可以使用以下命令发布模板：

npm publish --access public

猜猜看？你刚刚创建了你的第一个 create-react-app 模板！

要查看实际效果，请使用以下命令创建一个新项目：

npx create-react-app your-project-name --template [your-template-name]

your-template-name应该是你的模板名称，不带cra-template-前缀。该--template参数用于将其标识为模板。

结束

希望这篇文章对您有所帮助。快来创建所有模板吧！！！