将实用程序脚本添加到 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