メインコンテンツにスキップ

カスタムテンプレート

注: この機能は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]

カスタムテンプレートの検索​

デフォルトで2つのテンプレートを提供しています

ただし、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`に名前が変更されます。

ここに dowolne pliki を追加できますが、少なくとも上記で指定されたファイルが必要です。

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のデフォルト値が置き換えられます。

便宜上、プロジェクトがyarnで初期化されると、カスタム`"scripts"`と`README`の`npm run`は常に`yarn`に置き換えられます。