开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何从package.json为react设置NODE_ENV

基础概念

package.json 是一个包含项目元数据和依赖项列表的文件，通常用于 Node.js 项目。NODE_ENV 是一个环境变量，用于指示 Node.js 应用程序的运行环境（例如开发、生产）。

设置 `NODE_ENV`

在 React 项目中，可以通过修改 package.json 文件中的 scripts 部分来设置 NODE_ENV。

示例 `package.json`

{
  "name": "my-react-app",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  }
}

修改 `scripts`

可以通过在 scripts 中添加 NODE_ENV 环境变量来设置不同的环境。

{
  "name": "my-react-app",
  "version": "1.0.0",
  "scripts": {
    "start": "NODE_ENV=development react-scripts start",
    "build": "NODE_ENV=production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  }
}

优势

环境区分：通过设置 NODE_ENV，可以在开发和生产环境中使用不同的配置和优化策略。
性能优化：在生产环境中，React 会进行代码压缩和优化，提高应用的加载速度和性能。
调试便利：在开发环境中，React 提供了更多的调试工具和警告信息，便于开发者快速定位和解决问题。

类型

NODE_ENV 主要有以下几种类型：

development：开发环境，主要用于开发和调试。
production：生产环境，用于部署和运行最终的应用程序。

应用场景

开发环境：在开发过程中，使用 NODE_ENV=development 可以启用热重载、错误提示等功能，提高开发效率。
生产环境：在部署应用程序时，使用 NODE_ENV=production 可以启用代码压缩、优化等策略，提高应用的性能和安全性。

常见问题及解决方法

问题：为什么在生产环境中某些功能失效？

原因：可能是由于 NODE_ENV 设置不正确，导致某些依赖项或插件在生产环境中未能正确加载或运行。

解决方法：确保在 package.json 的 scripts 中正确设置了 NODE_ENV=production，并重新构建项目。

问题：如何在代码中访问 `NODE_ENV`？

解决方法：可以通过 process.env.NODE_ENV 访问 NODE_ENV 的值。

if (process.env.NODE_ENV === 'development') {
  console.log('Running in development mode');
} else if (process.env.NODE_ENV === 'production') {
  console.log('Running in production mode');
}

参考链接

通过以上步骤和解释，你应该能够成功地在 React 项目中设置和使用 NODE_ENV。

相关搜索:将NODE_ENV从package.json传递给Docker-compose 如何在windows上设置NODE_ENV with npm脚本？尽管我设置了环境变量，NODE_ENV仍显示为undefined 如何使用verdaccio将项目的package.json设置为能够从本地注册表安装如何从expect设置为变量从onClick设置为数据输入react的筛选状态可以从package.json脚本中设置dotenv变量吗？react-hook-form和react-datetime:如何从按钮将时间设置为moment()如何从childFragment为DialogFragment设置targetFragment 尝试在Heroku中为MERN应用程序设置package.json 将react元素设置为活动设置后React状态为空如何在React Native中将速度设置为scrollTo()？如何使用react-hooks为状态设置函数？如何在react中将Firebase对象设置为状态？如何在React中将高度动态设置为自动？如何在React Native上将视频设置为背景如何在React中将头部设置为“默认排序”？如何从git合并中排除package.json？Node.js如何设置服务器环境端口和NODE_ENV？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

常用的package.json，还有这么多你不知道的骚技巧

在每个项目的根目录下面，一般都会有一个 package.json 文件，其定义了运行项目所需要的各种依赖和项目的配置信息（如名称、版本、许可证等元数据）。

03

带你了解一些package.json的骚操作

“ 关注前端开发社区，回复"1"即可加入前端技术交流群，回复 "2"即可免费领取 500G前端干货！

05

带你了解一些package.json的骚操作

在每个项目的根目录下面，一般都会有一个 package.json 文件，其定义了运行项目所需要的各种依赖和项目的配置信息（如名称、版本、许可证等元数据）。

04

create react app 区分不同的环境

最近在开发项目的过程中，遇到了多个环境：本地开发环境，测试环境，qal 环境和线上环境区分的问题，每个环境对应的变量有所差别，比如对接公众号时候，appId 就跟不同的环境挂钩。但是使用 Create React App 搭建的项目，npm run start 指向本地环境 development，npm run build 指向线上环境 production，那么还有其他两个环境应该怎么做呢？

01

使用 Docker 高效部署你的前端应用

Docker 变得越来越流行，它可以轻便灵活地隔离环境，进行扩容，运维管理。对于业务开发者而言，随着持续集成的发展，对代码质量及快速迭代的要求也越来越高。

01

使用 React 和 NodeJS 创建一个全栈项目

我们都知道 React 非常优秀并且非常出色，我们可以使用 create-react-app 快速搭建一个前端应用。但是由于 React 构建出来的只是前端静态资源（如：HTML、CSS 、JS 等），往往不能独立部署，我们还需要一个 WEB 服务器，还需要调用 API；在本文中，我将使用 React 和 NodeJS 创建一个全栈项目。介绍下如何让 Node.js 作为 web 服务器来加载 React 构建出的静态资源，如何让 React 程序可以直接调用 NodeJS API。

04

Node.js 服务 Docker 容器化应用实践

本篇不会讲解 Docker 命令的使用、安装等，因为在之前一篇文章【一文零基础教你学会 Docker 入门到实践

02

【npm】伙计，给我来一杯package.json！不加糖

前言：夜深了，我熬了一锅热气腾腾的package.json，给大家端上来，希望大家喜欢 json和JS对象的区别 package.json，顾名思义，它是一个json文件，而不能写入JS对象。所以我

06

设计师编程指南之Sketch插件开发 10 - skpm & webview

往期文章索引： 1 / 入门基本概念、page的相关操作 2 / artboard 、NSFileManager 和 NSString 关于文件及文件夹的相关操作 3 / DIY一个Sketch插件，生成猫猫狗狗的全家福 4 / NSPasteboard 、text 的操作 5/ Shape 的一些操作，主要介绍 line 及 rect 6/ Shape的curve操作 7/ GUI 8/ Cocoa基础 9/ Shape中的oval shadow： “ 本期由 CanisMinor 创作，他是一枚 U

07

解决线上域名Webpack热更新失败问题

很多业务的前端页面开发是用直接代理开发环境的js静态资源到本地资源的方式。静态资源通过代理简单配置即可代理到本地，但是WebSocket代理不一定能成功

03

React + webpack 开发单页面应用简明中文文档教程（十一）将项目打包到子目录运行

版权声明：本文为 FengCms FungLeo 原创文章，允许转载，但转载必须注明出处并附带首发链接 https://blog.csdn.net/FungLeo/article/details/80841308

03

在 Docker 中如何高效部署 Node Server

一个高效合理的部署方案，不仅能够实现快速升级，滚动更新，负载均衡，应用隔离等部署特性，而且配有一套成熟稳定的监控。

03

使用 webpack 4 和 Babel 7 构建 React 应用及如何引入 Material Design

在过去的一年和一些人中，我一直在与 Creative Tim 合作。我一直在使用 create-react-app 来开发一些不错的产品。有很多客户询问如何在 Webpack 上迁移我们的产品模板。

06

node环境中设置process环境变量

node中有全局变量process表示当前node进程，process（进程）其实就是存在node中的一个全局变量，process.env包含着关于系统环境的信息。但是process.env中并不存在NODE_ENV这个东西。其实NODE_ENV只是一个用户自定义的变量。

01

npm脚本和package.json

在创建node.js项目如一个vue项目，或一个react项目时，项目都会生成一个描述文件package.json 。

02

前端组件/库打包利器rollup使用与配置实战

写rollup的文章是因为笔者最近要规范前端开发的业务流程和架构，并提供内部公有组件库和工具库供团队使用。在查阅大量资料并对比了webpack和rollup的优缺点之后，最终选择rollup来作为打包工具，我们最终要实现通过npm的方式安装我们的组件库和工具库：

02

vue-cli-service: command not found报错引发的血案

最近因为工作需要，开始学习vue，于是在github上找了一个star数比较高的项目 ant-design-vue-pro 准备练手。项目克隆下来后，用 vscode 打开工程，并且使用了 vscode 自带的终端安装了依赖包，但是准备执行 yarn serve 启动工程的时候却意外的抛出了一个错误：

02

React多页面应用1

1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28 2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29 3.React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)----2017.12.30 4.React多页面应用4(webpack自动化生成多入口页面)----2017.12.31 5.React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码

08

React 基础知识

在正式讲解 React 之前，我们需要对 WebPack 部分做一个简单的介绍，而 WebPack 0 基础的同学，可以先参考 WebPack 模块化打包工具（上）、WebPack 模块化打包工具（下）这两篇文章的讲解，再进行 React 的学习

04

webpack3.x文件配置

webpack3.x 主配置webpack.config.js文件，每个模块的详细信息都有一定的注释，如果有不对的地方，还请指教！

02

如何使用 docker 高效部署 Node 应用

一个合理并且高效的部署方案，不仅能够实现快速升级，平滑切换，负载均衡，应用隔离等部署特性，而且配有一套成熟稳定的监控。

03

(17/24) webpack实战技巧：生产环境和开发环境并行设置,实现来回切换

--开发依赖:就是开发中用到而发布时用不到的。在package.json里面对应的就是devDependencies下面相关配置。

02

docker构建前端项目的镜像多种示例写法

本地编译后构建 FROM nginx:latest COPY dist /usr/share/nginx/html 示例一 FROM node:latest as builder WORKDIR /app COPY package.json . RUN npm install --registry=http://registry.npm.taobao.org COPY . . RUN npm run build FROM nginx:latest COPY nginx.conf /etc/nginx

01

umijs环境变量问题

其打印出来的结果仍然是development，(大概是这个效果，这里是手动做的打印数据)

02

React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)

本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28 2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29 3.React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)----2017.12.30 4.React多页面应用4(webpack自动化生成多入口页面)----201

08

vite开发环境、生产环境配置

一个项目可能会有开发版本、上线版本、测试版本等等多个版本，不同的环境会有不同请求api接口，就需更改一些基本配置，这时候就显得很麻烦，所以这里就使用了环境变量。我们只需做简单的配置，把环境状态切换的工作交给代码。

04

React多页面应用1(webpack开发环境搭建,包括Babel、热更新等)

本教程总共7篇,每日更新一篇,请关注我们,敬请期待! 1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28 2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29 3.React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)----2017.12.30 4.React多页面应用4(webpack自动化生成多入口页面)----2017.12.31 5.React多页面应用5(

06

nodemon+cross-env+config实现支持热更新的能根据不同环境加载不同配置的nodejs环境

nodemon的配置文档介绍的可以在scripts中一一配置，也可以在上面的配置文件中配置，我们建议在配置文件中配置，清晰明了还好管理。

02

react配置生产环境和测试环境地址

写在前面之前一直写关于vue的文章，经常看我文章的可能从上篇文章就知道了我已经不写vue了，以后就写react了，会持续更新，今天说一下我搭建框架的时候配置不同环境的步骤，大家可以借鉴以下，也可以自己搞一下！在项目根目录创建两个环境文件 .env.development .env.production 文件内容 .env.developemnt REACT_APP_BASE_URL = 'https://test.com' REACT_APP_ENV = 'development' .env.pr

02

npm install、npm install --save与npm install --save-dev区别

npm install X: 会把X包安装到node_modules目录中不会修改package.json 之后运行npm install命令时，不会自动安装X npm install X –save: 会把X包安装到node_modules目录中会在package.json的dependencies属性下添加X 之后运行npm install命令时，会自动安装X到node_modules目录中之后运行npm install –production或者注明NODE_ENV变量值为production时

02

npm install、npm install --save与npm install --save-dev区别

会把X包安装到node_modules目录中不会修改package.json 之后运行npm install命令时，不会自动安装X

01

Nodejs跨平台环境变量设置cross-env

在搭建公司新的前端工程的架构中，需要在在package.json的scripts标签下配置一系列命令，如下所示：

03

gulp-preprocess + os 根据打包环境设置请求地址

安装依赖 // npm npm i --save-dev gulp-preprocess // yarn yarn add -d gulp-preprocess 获取本地IP const os = require('os') function getLocalHost(){ const netWork = os.networkInterfaces() const lcoalKey = Object.keys(netWork)[0] return netWork[lcoalKe

04

你的第一个 Docker + React + Express 全栈应用

最近发现一个很有意思的现象：一个人想学某样技术的时候，当学会了之后，但是这时出现了一个问题需要学习另一门技术时，无论这个人前面学得多么刻苦，用功，到这一步有 99% 的概率都会放弃。我愿称这种现象为 “学习窗口”。

01

玩转 Docker 部署

最近发现一个很有意思的现象：一个人想学某样技术的时候，当学会了之后，但是这时出现了一个问题需要学习另一门技术时，无论这个人前面学得多么刻苦，用功，到这一步有 99% 的概率都会放弃。我愿称这种现象为 “学习窗口”。

02

使用nodejs构建Docker image最佳实践

docker容器的出现，彻底的改变了应用程序的运行方式，而nodejs同样的也颠覆了后端应用程序的开发模式。两者结合起来，就会产生意想不到的作用。

02

使用nodejs构建Docker image最佳实践

docker容器的出现，彻底的改变了应用程序的运行方式，而nodejs同样的也颠覆了后端应用程序的开发模式。两者结合起来，就会产生意想不到的作用。

03

vue vue-clie多环境配置

键：环境名，在运行命令的时候使用，如：npm run serve01就是执行该键所对应的值命令值：vue-cli-service命令；serve表示是运行还是打包，serve表示是编译运行，build则是进行打包；--mode serve_01表示环境的模式名字，在创建配置文件的时候作为区分。

01

原生小程序之工程化探索

习惯用webpack对项目开发工程化，接触小程序后，稍微有点不适应，市面上有taro等优秀的小程序框架可以使用，由于负责项目历史背景，而无法大规模改造，因此只能做一些简单的工程化方案

01

uni-app的多环境部署配置

记录下如何对uni-app项目进行多环境打包部署改造 # 环境区分官方文档说明：开发环境和生产环境 uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。在HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境 # 解决方案使用基于vue-cli命令行方式创建项目添加必要的环境变量， VUE_APP_ 起始，例如 VUE_APP_BASE_API 即在

01

Vue 设置环境变量和模式

在项目的根目录下新建两个文件： .env.dev .env.prod 文件内容如下：开发环境： NODE_ENV=development VUE_APP_SERVER=http://127.0.

04

Rollup

什么是Rollup rollup.js是Javascript的ES模块打包器，我们熟知的Vue、React等诸多知名框架或类库都通过rollup.js进行打包。与Webpack偏向于应用打包的定位不同，rollup.js更专注于Javascript类库打包（虽然rollup.js也可以提供资源打包，但显然这不是它的强项）。在我们学习Vue和React等框架源码或者自己编写Javascript类库时，rollup.js是一条必经之路。 Rollup 的好处 Tree Shaking: 自动移除未使用的代

02

前端包管理工具与配置项

任何一个项目的构建离不开工具和统一的管理标准，在项目开发和维护过程中，我们需要了解安装包的相应工具和配置文件，以此来有效的进行项目的迭代和版本的更新，为项目提供基本的运行环境。

01

NODE_ENV不是内部或外部命令，也不是可运行的程序或批处理文件

01

Vue 3.0 遇到的问题

注意： webpack 5 要求至少 Node.js 10.13.0 (LTS)

01

封装一个vue组件

输入vue init webpack-simple <project-name>之后，一路回车就是了（sass可以根据自己爱好选择），然后根据出现的提示依次执行切换目录，下载依赖。

01

浅谈前端测试

顾翔老师开发的bugreport2script开源了，希望大家多提建议。文件在https://github.com/xianggu625/bug2testscript，

01

2020年手工webpack构建react项目，完美支持ssr，包括css和图片资源

这几天花了大量时间终于折腾出一个完美版本，并且是自己构建的webpack配置（之前失败很可能是因为react自带的webpack太复杂，构建服务端代码时有些细节没处理好）

05

13 个 npm 快速开发技巧

每天，数以百万计的开发人员使用 npm 或 yarn 来构建项目。运行npm init或npx create- response -app等命令几乎构建JS项目的首选方式，无论是为客户端或服务器端，还是桌面应用程序。

05

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭