將實用程序腳本添加到 create-react-app React / Typescript 應用程序

Question

我有一個使用create-react-app --typescript的 Typescript 單頁 React 應用程序。 源代碼位於src/中的.ts和.tsx文件中。

現在我想創建一些用於開發的實用程序腳本。 在這種情況下，從我們的生產服務器下載數據並將其上傳到我的本地開發服務器，但這只是一個示例。 這些腳本具有應用程序也具有的依賴項（例如 API 客戶端庫），我想從應用程序導入各種常量和輔助函數。

在 create-react-app 的結構中是否有一個地方可以放置這樣的腳本並讓它們工作？ 我希望能夠使用npm run scriptname來調用它們並讓它們從應用程序中導入。

（在我們的 Django 后端，我會將這些變成 Django 管理命令，我正在尋找一種方法來制作類似的東西）

Answer 1

我在src中創建了一個名為scripts的文件夾。

它可能看起來像

- scripts
  |- lint.ts
  |- deploy.ts

然后在我的package.json

"scripts": {
  // ... add commands:
  "deploy:staging": "ts-node ./src/scripts/deploy.ts --staging",
  "deploy:production": "ts-node ./src/scripts/deploy.ts --production",
  "lint:check": "eslint ./src",
  "lint:format": "eslint ./src --fix"
}

像任何其他腳本一樣運行： npm run link:format

Answer 2

Create-React-App 對您的項目施加的限制很少，即使您不彈出。 您可以將任何自定義腳本添加到 package.json 的"scripts"部分，以便您自己創建自定義 npm/yarn 命令。

我喜歡將我的腳本放在src旁邊的scripts目錄中，以提醒自己這段代碼不是我的 react 應用程序的一部分（特別是，不是我為生產構建時創建的包的一部分）。

例如，要添加一個填充您的開發環境的命令，您可以編寫一個執行該操作的 nodeJS 程序，並將該命令添加到您的 package.json 中，如下所示：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    // ...
    "populatedev": "node scripts/populate-dev-environment"
  },

或者，如果您更喜歡 bash 腳本，

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    // ...
    "populatedev": "./scripts/populateDev.sh"
  },

無論哪種情況，您都可以從 CLI 運行此命令，如下所示：

npm run populatedev

# or if you prefer yarn

yarn populatedev