Node 环境变量 process.env.NODE_ENV 之webpack应用
转载来源:https://github.com/wfzong/NODE_ENV_TEST,这里还有源码可以学习,谢谢原作者的分享!
对于process.env.NODE_ENV困惑起因为在配置webpack时,明明配置了:process.env.NODE_ENV为production,如下:
new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('production') }), new webpack.optimize.UglifyJsPlugin({ compress: process.env.NODE_ENV === 'production' })
但最终并没有生效,得到的 compress:false,本着有困难就gg的原则,找找找各种文档,总算理清了其中的关系。
文档一:Node 环境变量 文档二:使用环境变量
文档中说:
DefinePlugin 在原始的源码中执行查找和替换操作,在导入的代码中,任何出现 process.env.NODE_ENV的地方都会被替换为"production"。因此,形如if (process.env.NODE_ENV !== 'production') console.log('...') 的代码就会等价于 if (false) console.log('...') 并且最终通过UglifyJS等价替换掉。
也就是说,webpack config文件中定义的变量:
new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('production')
})
是为了你将要打包的文件中用的。 那如何在webpack config文件中使用 process.env.NODE_ENV 呢?答案是corss-env
进入主题
如上信息看着也许很乱,那通过一个实例来一步步验证一下吧~ 第一步:
npm init
生成一下package.json,然后install需要的模块:
npm install --save-dev webpack clean-webpack-plugin html-webpack-plugin webpack-merge cross-env
一、接下来进入主题,开始配置 webpack.config.js:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')const config = {entry:path.join(__dirname,"src/app.js"),output:{path:path.join(__dirname,"dist"),filename:"bundle.js"},plugins:[new HtmlWebpackPlugin()]}
module.exports = config
console.log("process.env.NODE_ENV 的值是(webpack.config.js):"+ process.env.NODE_ENV)
然后新建文件 src/app.js
console.log("app test")console.log("process.env.NODE_ENV 的值是(app.js):"+ process.env.NODE_ENV)
一切准备好后,给package.json加一行 :"build":"webpack"
"scripts": {"build":"webpack" }
然后执行:npm run build,控制台会有如下输出:
λ npm run build> node@1.0.0 build D:\works\test\VUE\NODE_ENV
> webpackprocess.env.NODE_ENV 的值是(webpack.config.js):undefined
Hash: f323df4deba684f859b8
Version: webpack 3.4.1
Time: 589msAsset Size Chunks Chunk Namesbundle.js 8.18 kB 0 [emitted] main
index.html 182 bytes [emitted][0] ./src/app.js 97 bytes {0} [built]+ 1 hidden module
Child html-webpack-plugin for "index.html":[2] (webpack)/buildin/global.js 509 bytes {0} [built][3] (webpack)/buildin/module.js 517 bytes {0} [built]+ 2 hidden modules
由于没有进行任何配置,所以上面的输出中给出的信息是:
process.env.NODE_ENV 的值是(webpack.config.js):undefined
通过浏览器访问/dist/index.html,控制台有如下信息输出:
app test process.env.NODE_ENV 的值是(app.js):undefined
也就是说,在/src/app.js里,process.env.NODE_ENV 也未定义
二、通过webpack -p参数控制
在package.json里增加一行:
"scripts": {"build":"webpack","build-p":"webpack -p"}
然后执行: npm run build-p 命令行输出没有任何变化,任然是:
process.env.NODE_ENV 的值是(webpack.config.js):undefined
但通过浏览器访问/dist/index.html,控制台有如下信息输出:
app test process.env.NODE_ENV 的值是(app.js):production
也就是说,通过webpack -p,然process.env.NODE_ENV值传递给app.js了(webpack.config.js并未获取到~)
三、通过 webpack.DefinePlugin 定义
接着看,假设webpack.config.js是基本定义,针对上线产品,额外定义了webpack.config.prod.js,然后通过webpack-merge合并两个配置文件webpack.config.prod.js如下:
const webpack = require('webpack') const merge = require('webpack-merge') const config = require("./webpack.config.js") module.exports = merge(config,{ plugins:[ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }), new webpack.optimize.UglifyJsPlugin({ compress: process.env.NODE_ENV === 'production' }) ] }) console.log("process.env.NODE_ENV 的值是(webpack.config.prod.js):"+ process.env.NODE_ENV)
可以看到,在这个文件里,我们通过webpack.DefinePlugin定义了process.env.NODE_ENV,现在在package.json里增加一行,并通过--config指定配置文件:
"scripts": {"build":"webpack","build-p":"webpack -p","build-prod":"webpack --config webpack.config.prod.js"},
然后执行:npm run build-prod 命令行里有如下输出:
process.env.NODE_ENV 的值是(webpack.config.js):undefined process.env.NODE_ENV 的值是(webpack.config.prod.js):undefined
通过浏览器访问/dist/index.html,控制台有如下信息输出:
app test process.env.NODE_ENV 的值是(app.js):production
这次没有用webpack -p参数,而是在webpack.config.prod.js里通过webpack.DefinePlugin定义了process.env.NODE_ENV,取得了相当的效果。
四、在config文件里获取NODE_ENV值
解决了在app.js获取NODE_ENV的值,如何在webpack配置文件里获取NODE_ENV的值呢,这样就可以根据不同的值定义相关的参数了,如上所述,答案是:corss-env,在package.json里增加一行:
"scripts": {"build":"webpack","build-p":"webpack -p","build-prod":"webpack --config webpack.config.prod.js","build-cross-env":"cross-env NODE_ENV=production webpack"}
这里执行:npm run build-cross-env,命令行里会得到:
process.env.NODE_ENV 的值是(webpack.config.js):production
通过浏览器访问/dist/index.html,控制台有如下信息输出:
app test process.env.NODE_ENV 的值是(app.js):undefined
可以看到,通过cross-env NODE_ENV=production,然信息传递给了webpack的配置文件,但app.js并没有获取到。
五、总结
很自然的想到,如果里要在配置文件里和业务代码里,都获取到NODE_ENV,那将3、4结合起来:
"scripts": {"build":"webpack","build-p":"webpack -p","build-prod":"webpack --config webpack.config.prod.js","build-cross-env":"cross-env NODE_ENV=production webpack","build-cross-env-with-prod":"cross-env NODE_ENV=production webpack --config webpack.config.prod.js"}
运行: npm run build-cross-env-with-prod,命令行中有显示:
process.env.NODE_ENV 的值是(webpack.config.js):production process.env.NODE_ENV 的值是(webpack.config.prod.js):production
通过浏览器访问/dist/index.html,控制台有如下信息输出:
app test process.env.NODE_ENV 的值是(app.js):production
转载于:https://www.cnblogs.com/QMM2008/p/9670140.html
Node 环境变量 process.env.NODE_ENV 之webpack应用相关推荐
- 环境变量process.env.NODE_ENV详解
process.env.NODE_ENV详解 前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家. 一. p ...
- nodejs 获取系统环境变量_Node.js中环境变量process.env的一些事详解
前言 最近这两天在和运维GG搞部署项目的事儿.碰到一个问题就是,咱们的dev,uat,product环境的问题. 因为是前后端分离,所以在开发和部署的过程中会有对后端接口的域名的切换问题.折腾了一下午 ...
- NodeJS的环境变量process.env.*
NodeJS的环境变量process.env.* 在学习一些关于node框架时,经常会看到类似的代码 if (process.env.NODE_ENV === 'production') {modul ...
- vue - vue中的process.env.NODE_ENV和环境变量
1,什么是process.env process.env 是 Node.js 中的一个环境对象.其中保存着系统的环境的变量信息.可使用 Node.js 命令行工具直接进行查看.如下: 而 NODE_E ...
- node process.env.NODE_ENV 使用 cross-env 配置 设置
process是一个全局对象,任意位置可以访问.在开发测试和正式部署时,需要区分不同的环境process.env.NODE_ENV,包括development和production,我推荐使用工具包c ...
- vue配置开发、测试、生产环境(proxy中获取process.env.NODE_ENV)
先是看了这个文章写的如何npm run build 的时候自动配置地址 参考文章"vue配置开发.测试.生产环境(不同环境,不同命令)_Amy_cloud的博客-CSDN博客_vue生产环境 ...
- process.env.NODE_ENV与@vue/cli-service及其.env.*默认外部环境配置文件之跨域部署
process.env.NODE_ENV与@vue/cli-service及其.env.*默认外部环境配置文件之跨域部署 目录 process.env.NODE_ENV与@vue/cli-servic ...
- process.env.NODE_ENV详解
一. process.env.NODE_ENV是什么? 在node中,有全局变量process表示的是当前的node进程. process.env包含着关于系统环境的信息,但是process.env中 ...
- Vue中process.env.NODE_ENV详解
一文弄懂如何在 Vue 中配置 process.env.NODE_ENV 最近在研习 vue.config.js 文件,发现一行,甚是费解. process.env.NODE_ENV 查阅资料后,发现 ...
最新文章
- 【2017下集美大学软工1412班_助教博客】结对编程1——模块化
- timestamp列的有关知识
- 漫画: 什么是外部排序?
- 城轨的两类时钟系统均同步于_基于两台SDS3000示波器同步产生“8通道”示波器...
- Java中常见RuntimeException与其他异常表及Exception逻辑关系详解
- Nginx 源码分析:ngx_queue_t
- IAR Embedded Workbench IDE 显示行号
- 1018. 锤子剪刀布 (20)
- 列标题 如何删除gridcontrol_Excel如何制作工资条?
- Tableau 发布到tableau online错误
- 有哪些培训管理教务系统?染书CRMA,进销存管理明细清晰
- [Day 1]上海CNUTCon全球运维技术大会2017实录
- 【Go语言入门教程】Go语言基本语法
- 解决FAT32格式U盘安装win10时0x8007000D错误
- 百度搜索结果页面的参数 搜索框提示词搜索方式(rsv_sug2)
- oracle查看表空间物理路径,oracle查看表空间物理文件的名称,路径及大小
- 群发邮件平台你知道那个好吗,一款邮件群发100万封群发邮件平台
- 关于华三HCL使用时,设备端口状态为down的解决
- python中multiprocessing.Manger()支持类型
- 华为智慧屏和鸿蒙系统对比,鸿蒙系统初体验,华为智慧屏V65到底值不值得入手?...
热门文章
- java虚拟机相同吗_Java虚拟机是否真的是与VMWare或Parallels文件相同的虚拟机?
- java 正则提取邮箱_如何用正则表达式提取一个网站里面的所有邮箱地址?
- 前端悬浮窗效果_web前端入门到实战:css过渡和动画解析文
- axios+vue+springboot完成批量删除
- python 热力图_python数据分析:数据缺失机制及利用missingno库对缺失可视化
- halcon 旋转_HALCON高级篇:3D相机标定
- cubemx stm32 配置两个串口_STM32CubeMX系列教程5:串行通信(USART)
- docker mysql5.7 主从_使用Docker部署MySQL 5.78.0主从集群的方法步骤
- elementUI table 表格表头居中 颜色、内容居左
- gd动态曲线 php_PHP 高级编程之多线程