独自の反応テンプレートを作成する

10007 ワード
react redux devops テキストリンク
あなたは同じことを削除して、ちょうど余分なパッケージを追加するだけで起きて実行して反応アプリを作成するのに疲れていますか?コマンドを入力できたらいいのに.ライクセイyarn create react-app <app-name> --template <template-name> ――POOF !--それはちょうどあなたがすぐにコーディングを開始できるように必要なものとすべてを持っているCRAのバージョンを吐き出して!まあ、友人、運がいい!
かなりの間の作成反応アプリを使用した後、私はファイルやコードを削除することにうんざりしたし、私は行くと反応ルータ、Redux、およびいくつかの他のものをインストールするだけで地面から降りてくる必要があります.それは毎回同じ長いセットアッププロセスを通過しなければならない私の魂でゆっくりチップを切り始めた何かになりました.
だからここでは、あなた自身の反応アプリテンプレートを作成し、NPMにそれを公開する必要がある手順を踏んでいる!始めましょう.

ステップ1
フェイスブックへcreate-react-app repo , フォークして、マシンにcra repoをクローンします.

ステップ2
したら、あなたのマシン上で作成された反応アプリディレクトリを作成します.cd packages/ .
パッケージディレクトリにあるので、テンプレートファイルのフォルダを作成します.テンプレートを作るには、命名規則に従うのが賢明でしょうcra-template-<template-name> この新しいディレクトリを作るとき.例:mkdir cra-template-bushido (旧武士の後の)code 名誉の意)

ステップ3
パッケージディレクトリ内の適切な名前のテンプレートディレクトリを持っているので、テンプレートの設定を開始できます.CRAテンプレートディレクトリの中にtouch template.json . このテンプレート.JSONは、追加のパッケージやスクリプトを追加する場所です.CRAはすでにあなたのために行うものを追加する心配しないでください.マイテンプレート.JSONはこんな感じになってしまいました.
{
  "devDependencies": {
    "@testing-library/react": "^9.3.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/user-event": "^7.1.2"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "normalize.css": "^8.0.1",
    "react-redux": "^7.1.1",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.4",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "serve": "^11.2.0",
    "styled-components": "^4.4.0"
  },
  "scripts": {
    "serve": "serve -s build",
    "build-and-serve": "npm run build && npm run serve"
  }
}
これでREADMEを作成できます.MDは、私たちの驚くべき新しいテンプレートを達成するために、次のステップに移動したいものの良い説明を与える.

ステップ4
作りましょうtemplate ディレクトリ.これまでのところ、私たちのファイル構造は以下のように少し見えます.
create-react-app/
  .github/
  docusaurus/
  packages/
    ...
    cra-template-<template-name>/
      template/
      README.md
      template.json
  ...
このテンプレートフォルダの中のファイルとディレクトリは、CRAがテンプレートを呼び出すときに吐き出してしまうものです.だから内部template/ 私たちはpublic/ とsrc/ フォルダとgitignore ファイル(craはgitignoreファイルに'.'を追加します.コードとこのテンプレートがテンプレートを使用することを決定する誰にでも提供しなければならないものを記述するMD.パブリックフォルダを取得するにはcp -R ../cra-template/template/public ./template パブリックフォルダを既定のテンプレートディレクトリから、新しいテンプレートフォルダにコピーします.
あなたはアプリが必要になるだろう.インデックス.JS、多分インデックス.CSSまたは多分コンポーネントフォルダ.これは本当に自分自身になる場所ですので、Srcフォルダーの中に完璧なBoilerPlateを設定します.

ステップ5
我々はほとんど完了です!これで、パブリックフォルダとsrcフォルダ、gitignore、readmeでテンプレートフォルダがあります.MDとテンプレート.それをする時間ですnpm init . テンプレートであなたの主要なポイントを確認します.JSONとNOTインデックス.jsこれが私のパッケージです.JSONのように見えます.
{
  "name": "cra-template-bushido",
  "version": "1.0.1",
  "description": "CRA plus redux, router, axios, normalize.css, styled components",
  "main": "template.json",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/JimmyMcBride/create-react-app.git"
  },
  "keywords": [
    "redux",
    "router",
    "axios",
    "styled-components"
  ],
  "author": "Jimmy McBride",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/JimmyMcBride/create-react-app/issues"
  },
  "homepage": "https://github.com/JimmyMcBride/create-react-app#readme"
}

ステップ6
走る前にnpm login , 私たちは、NPMのアカウントを持っていることを確認しなければなりません.一度あなたのアカウントを設定し、電子メールを確認し、実行しているnpm login 一度ログインしているだけで実行されますnpm publish そしてブーム!ちょうどそのように、あなたのテンプレートは生きている必要があります--template <template-name> 最後にタグを付けると良いです!私はテンプレートCRAテンプレート武士道を命名したので、私はコマンドを実行しますyarn create react-app <app-name> --template bushido , そしてそれは私自身のカスタム反応アプリboilerplateを紡ぎます.
私はあなたが私として役立つとしてこれを発見願っています.私はあなたの考えやフィードバックは以下のコメントにあるものを教えてください!ありがとうあなたが私のCRAテンプレートコードを参照として、そして/または、私がそれをした方法を見るためにチェックしたいならば.click here .
MySQLのrpm方式インストール
mysqlデータベースのすべてのテーブルの表示