process.env.NODE_ENV理解
1、理解NODE_ENV
在node中,有全局变量process表示的是当前的node进程。process.env包含着关于系统环境的信息。但是process.env中并不存在NODE_ENV这个东西。NODE_ENV是用户一个自定义的变量,在webpack中它的用途是判断生产环境或开发环境的依据的。
process是node的全局变量,并且process有env这个属性,但是没有NODE_ENV这个属性。
process.env 属性返回的是一个包含用户环境信息的对象,它可以区分开发环境或正式环境的依据
2、理解 DefinePlugin 含义
官网解释的是:DefinePlugin允许我们创建全局变量,可以在编译时进行设置,因此我们可以使用该属性来设置全局变量来区分开发环境和正式环境。这就是 DefinePlugin的基本功能。
因此我们可以在webpack.config.js 中添加如下代码配置全局变量信息了,因为当webpack进行编译的时候会全局设置变量;如下代码:
module.exports = {
plugins: [
// 设置环境变量信息
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify('5fa3b9'),
BROWSER_SUPPORTS_HTML5: true,
TWO: '1+1',
'typeof window': JSON.stringify('object'),
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
})
]
}
package.json 打包配置如下命令:
"scripts": {
"dev": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
"build": "webpack --progress --colors --devtool cheap-module-source-map",
"build:dll": "webpack --config webpack.dll.config.js"
},
这样配置完成后,为了验证一下是否是全局变量,运行npm run dev 打包后,我们可以在我们项目中入口js文件,打印下即可:比如如下代码:
console.log('Running App version ' + VERSION); // 打印 Running App version 5fa3b9
console.log(PRODUCTION); // 打印 true
console.log(process.env); // 打印 { NODE_ENV: undefined }
如上信息可以看到 process.env.NODE_ENV 打印出为undefined,那是因为我们在 package.json文件中未进行配置。下面我们把package.json 加上 NODE_ENV变量值,代码打包命令变成如下:
"scripts": {
"dev": "NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
"build": "NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
"build:dll": "webpack --config webpack.dll.config.js"
},
如上打包命令,在dev打包命令上,前面加上了 NODE_ENV=development 命令,在build打包命令上前面加上了 NODE_ENV=production,因此继续查看代码结果变为如下:
console.log('Running App version ' + VERSION); // 打印 Running App version 5fa3b9
console.log(PRODUCTION); // 打印 true
console.log(process.env); // 打印 { NODE_ENV: 'development' }
可以看到这个时候 process.env.NODE_ENV 才有值,因此在项目打包中,为了区分开发环境和正式环境我们像如上配置即可,然后在webpack.config.js中通过 process.env.NODE_ENV 这个来区分正式环境还是开发环境即可。
转载https://www.cnblogs.com/tugenhua0707/p/9780621.html
process.env.NODE_ENV理解的更多相关文章
- 理解webpack之process.env.NODE_ENV详解(十八)
在node中,有全局变量process表示的是当前的node进程.process.env包含着关于系统环境的信息.但是process.env中并不存在NODE_ENV这个东西.NODE_ENV是用户一 ...
- 理解webpack中的process.env.NODE_ENV
参考资料 一. process 要理解 process.env.NODE_ENV 就必须要了解 process,process 是 node 的全局变量,并且 process 有 env 这个属性,但 ...
- Node 环境变量 process.env.NODE_ENV 之webpack应用
转载来源:https://github.com/wfzong/NODE_ENV_TEST,这里还有源码可以学习,谢谢原作者的分享! 对于process.env.NODE_ENV困惑起因为在配置webp ...
- node服务开发环境判断和启动端口指定---process.env.NODE_ENV
在node启动的时候我们需要在代码里面判断服务器运行环境 可以根据process.env.NODE_ENV来判断 一.开发环境的判断 1.安装 npm i -g cross-env 2.启动 cros ...
- OS X获取process.env.NODE_ENV出错
原来项目是其它小组在维护,现在我们需要维护部分功能,把项目带到OS X上运行发现 webpack.config.js获取process.env.NODE_ENV变量出错 解决: 根据电脑操作系统平台类 ...
- sysUpload.vue上传组件 的时候 看进度的时候 不要mock 注释掉 // if (process.env.NODE_ENV !== 'production') require('@/mock')
上传组件 的时候 看进度的时候 不要mock 注释掉 // if (process.env.NODE_ENV !== 'production') require('@/mock') <!-- * ...
- node与webpack的process.env.NODE_ENV
先看两篇文章 1.前端工程项目的NODE_ENV 2. Node 环境变量 process.env.NODE_ENV 之webpack应用 3.process.env.NODE_ENV 下面全部是在w ...
- process.env.NODE_ENV
Node 随记 if (process.env.NODE_ENV === 'production') { module.exports = require('./prod.js') } else { ...
- webpack配置中环境变量-process.env. NODE_ENV
背景 webpack有一特性就是可以让使用者灵活的在不同环境(开发环境,生产环境等)进行相应的特性的策略打包,比如: 是否使用反向代理使用接口,针对不同的静态资源(如图片等)是直接拷贝还是进行打包编译 ...
随机推荐
- JAVA基础之JSP与EL技术、JSTL技术
要牢记jsp四大作用域(pageContext域:当前jsp页面范围 request域:一次请求 session域:一次会话 application域:整个web应用)以及九大内置对 ...
- jQuery设置样式css
一.设置单个样式 $('.div').css('padding-top','8.6rem'); 二.设置多个样式 $('.div').css({'width': "240px",' ...
- Spring的核心机制:依赖注入
依赖注入的概念 当一个对象要调用另一个对象时,一般是new一个被调用的对象,示例: class A{ private B b=new B(); public void test(){ b.say ...
- ES读写索引内幕分析
一.简介 ES中的索引都进行分片,每个分片都会保存多个副本.这些副本称为复制组,在添加或删除索引时必须同步副本.如果不这样,从不同的副本中读取的索引可能截然不同.保持分片副本同步并从中提供读取的过程被 ...
- SHELL脚本编程-expect
SHELL脚本编程-expect 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.expect概述 1>.expect介绍 expect 是由Don Libes基于Tcl( ...
- C# List<T>排序总结
这里有很多种方法对List进行排序,本文总结了三种方法,但有多种实现. 1.对基础类型排序 方法一: 调用sort方法,如果需要降序,进行反转: List<int> list = new ...
- Linux中在vim/vi模式下对文本的查找和替换
查找: 1.vim filename 进入一般模式下 2.查找和替换方法 /word 向下查找word 的字符串 例如 /chengtingting 向下查找字符chengtingt ...
- Python编写的ssh客户端[类似putty]
转载请注明出处:http://blog.csdn.net/jmppok/article/details/17588381 windows下可以通过putty以ssh方式连接linux主机.但putty ...
- faster-rcnn系列原理介绍及概念讲解
faster-rcnn系列原理介绍及概念讲解 faster-rcnn系列原理介绍及概念讲解2 转:作者:马塔 链接:https://www.zhihu.com/question/42205480/an ...
- Linux操作系统性能调优的方法
http://www.cnblogs.com/L-H-R-X-hehe/p/3963442.html Linux是一套免费使用和自由传播的类Unix操作系统,Linux不同的发行版本和不同的内核对各项 ...