NODE_ENV和webpack
前端开发中的 NODE_ENV
的知识以及与 webpack
的关系
NODE_ENV
node.js
原生对象 process
的 env
属性是个对象(mac环境):
process.env.NODE_ENV
很显然,NODE_ENV
属性并不在 process.env
对象上,但通过字面意思(node environment)可以知道,这意为 node.js 环境
。
用途
不知道使用这个自定义变量的第一人是谁,但是现在已经成为了前端开发中的一个使用规范。
它的主要用途是:在使用 node.js
环境执行 JavaScript 脚本
时,通过这个属性来区分不同环境(开发、生产、测试等)下的处理(构建、运行等)策略。
它最最最常见的两个值:
process.env.NODE_ENV === 'development'; // 或简写 dev,意为开发环境 process.env.NODE_ENV === 'production'; // 或简写 prod,意为生产环境
如何使用
在使用 npm
构建的前端项目根目录下的 package.json
中 scripts
属性是一个对象,它的每一个 键名 都可以在命令行(已经安装了 node.js
并将命令添加至环境变量)中通过 npm run 键名
来运行,而真正运行的命令则为 键值:
{ "scripts": { "dev": "webpack --config webpack.dev.config.js" } }
$ npm run dev
实际运行的命令是 webpack --config webpack.dev.config.js
,我们修改键值
:
{ "scripts": { "dev": "NODE_ENV=development webpack --config webpack.dev.config.js" } }
这样就把 NODE_ENV
属性注入到了 process.env
对象上,并且值为 development
,我们 只可以在 webpack.dev.config.js
脚本中以及它所引入的脚本中访问到 process.env.NODE_ENV
,而无法在其它脚本中访问。
在 webpack
中的使用
现在的前端工程使用 webpack
多是用来构建单页应用,入口脚本文件
会以一个树形的结构引用着项目其它脚本文件。
而 webpack
处理的这个入口脚本文件
及其引用的脚本文件都无法访问为 webpack.dev.config.js
脚本提供的 process.env.NODE_ENV
属性,但是可以通过 webpack
的插件来让这些脚本文件都能访问到 process.env.NODE_ENV
:
const webpack = require('webpack'); module.exports = { plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' }) ] }
原文地址:https://www.cnblogs.com/janney/p/11310368.html
- 【译】使用Docker Compose一条指令配置Mesos
- 【译】Windows下的Docker Machine - 如何设置你的Docker主机
- 史上最透彻的KMP算法讲解
- 【译】助你成功搭建云应用的12条方法
- 你能用微信小程序打开小程序了【附开发方法】
- Logistic回归实战篇之预测病马死亡率(一)
- 腾讯游戏DBA利刃 - SQL审核工具介绍
- Logistic回归实战篇之预测病马死亡率(二)
- Windows环境下跑通Truffle开发环境
- Logistic回归实战篇之预测病马死亡率(三)
- 如何将finecms链接URL中的list和show去掉
- Solidity语法知识点(文末有彩蛋)
- 人脸Haar特征与快速计算神器:积分图
- 内存为王:DBIM RAC Share Nothing架构的挑战和解决方案
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Dockerfile 指令
- Docker 构建容器Tomcat+Nginx+MySQL
- 三种动态控制SAP CRM WebClient UI assignment block显示与否的方法
- TCGA数据库中癌症名称缩写
- CloudFlare自定义节点优化网站
- 什么是SSL?为什么要为WordPress网站使用SSL?
- R语言再保险合同定价案例研究
- SAP CRM附件的技术属性设计原理
- R语言对混合分布中的不可观测与可观测异质性因子分析
- R替换函数gsub
- R语言泊松回归对保险定价建模中的应用:风险敞口作为可能的解释变量
- asp dotnet core 提供大文件下载的测试
- R语言模拟人类生活预期寿命动态可视化动画图gif
- Python遍历字典
- R语言随机森林模型中具有相关特征的变量重要性