npm 如何使用create-react-app配置创建和运行应用程序的开发版本

aurhwmvo  于 2022-11-30  发布在  React
关注(0)|答案(3)|浏览(217)

npm run build创建项目的生产版本。我如何创建开发版本?我使用gradle-node-plugin来构建工件。项目具有标准的 create-react-app 配置。

w8biq8rn

w8biq8rn1#

仅使用create-react-app是不可行的,Here存在一个未解决的问题,而且看起来不会很快添加。
但是,您可以使用一个名为dotenv的包来实现此目的,您应该执行以下步骤:

  • 安装dotenv(确保添加save devnpm install dotenv-cli --save-dev
  • 在package.json脚本部分添加新脚本:"build:dev": "dotenv -e .env.development react-scripts build",
  • 您可以使用npm run build:dev为开发进行构建

PS:如果你想避免错误地将dev构建部署到生产环境(如这里所提到的),你可以将build:prod添加到package.json中,并禁用常规的build命令,参见代码:

"build:dev": "dotenv -e .env.development react-scripts build",
"build:prod": "dotenv -e .env.production react-scripts build",
"build": "echo \"Please use build:dev or build:prod \" && exit 1",

还要注意,process.env.NODE_ENV仍然是production,但它将加载您的.env.开发文件

f2uvfpb9

f2uvfpb92#

谢谢,@Moses。这是Moses Schwartz给出的答案的扩展。你也可以通过在bash shell中导出环境(开发、测试、生产)的值,让构建动态地选择环境文件。这样你就不必为不同的环境使用不同的构建命令了。
您可以在您的package.json中使用它

"start": "dotenv -e .env react-scripts start",
"build": "dotenv -e .env.${REACT_APP_ENVIRONMENT} react-scripts build",

因此,当运行npm开始时,它将从.env中选取环境值;当运行npm run build时,它将从. env中选取环境值。{REACT_APP_ENVIRONMENT}
要定义REACT_APP_ENVIRONMENT,可以执行以下操作:

export REACT_APP_ENVIRONMENT="development" or 
export REACT_APP_ENVIRONMENT="test" or 
export REACT_APP_ENVIRONMENT="production"

希望这能有所帮助。这将有助于为多个环境准备react应用程序。

62lalag4

62lalag43#

感谢@Tx_monster的评论
github.com/Nargonath/cra-build-watch

  • create-react-app的脚本,用于将开发版本写入磁盘 *
npm install -D cra-build-watch

package.json:
{
  "scripts": {
    "watch": "cra-build-watch"
  }
}

npm run watch

相关问题