在node中,有全局变量process表示的是当前的node进程。process.env包含着关于系统环境的信息。但是process.env中并不存在NODE_ENV这个东西。NODE_ENV是用户一个自定义的变量,在webpack中它的用途是判断生产环境或开发环境的依据的。

为了查看 process的基本信息,我们可以在文件夹中 新建一个 process.js 文件,在里面加一句代码:console.log(process);然后进入该文件夹,执行 node process.js 可以在命令行中打印如下信息:

$ node process.js
process {
title: 'node',
version: 'v4.4.4',
moduleLoadList:
[....],
versions:
{ http_parser: '2.5.2',
node: '4.4.4',
v8: '4.5.103.35',
uv: '1.8.0',
zlib: '1.2.8',
ares: '1.10.1-DEV',
icu: '56.1',
modules: '46',
openssl: '1.0.2h' },
arch: 'x64',
platform: 'darwin',
release:
{ name: 'node',
lts: 'Argon',
sourceUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4.tar.gz',
headersUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4-headers.tar.gz' },
argv:
[ '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node',
'/Users/tugenhua/个人demo/process.js' ],
execArgv: [],
env:
{ TERM_PROGRAM: 'Apple_Terminal',
SHELL: '/bin/zsh',
TERM: 'xterm-256color',
TMPDIR: '/var/folders/l7/zndlx1qs05v29pjhvkgpmhjm0000gn/T/',
Apple_PubSub_Socket_Render: '/private/tmp/com.apple.launchd.7Ax4C1EWMx/Render',
TERM_PROGRAM_VERSION: '404',
TERM_SESSION_ID: '82E05668-442D-4180-ADA3-8CF64D85E5A9',
USER: 'tugenhua',
SSH_AUTH_SOCK: '/private/tmp/com.apple.launchd.MYOMheYcL3/Listeners',
PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin',
PWD: '/Users/tugenhua/个人demo',
LANG: 'zh_CN.UTF-8',
XPC_FLAGS: '0x0',
XPC_SERVICE_NAME: '0',
SHLVL: '1',
HOME: '/Users/tugenhua',
LOGNAME: 'tugenhua',
SECURITYSESSIONID: '186a8',
OLDPWD: '/Users/tugenhua/工作文档/sns_pc',
ZSH: '/Users/tugenhua/.oh-my-zsh',
PAGER: 'less',
LESS: '-R',
LC_CTYPE: 'zh_CN.UTF-8',
LSCOLORS: 'Gxfxcxdxbxegedabagacad',
NVM_DIR: '/Users/tugenhua/.nvm',
NVM_NODEJS_ORG_MIRROR: 'https://nodejs.org/dist',
NVM_IOJS_ORG_MIRROR: 'https://iojs.org/dist',
NVM_RC_VERSION: '',
MANPATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/share/man:/usr/local/share/man:/usr/share/man:/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.13.sdk/usr/share/man:/Applications/Xcode.app/Contents/Developer/usr/share/man:/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/share/man',
NVM_PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/lib/node',
NVM_BIN: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin',
_: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node',
__CF_USER_TEXT_ENCODING: '0x1F5:0x19:0x34' },
pid: 14034,
features:
{ debug: false,
uv: true,
ipv6: true,
tls_npn: true,
tls_sni: true,
tls_ocsp: true,
tls: true },
_needImmediateCallback: false,
config: {},
nextTick: [Function: nextTick],
_tickCallback: [Function: _tickCallback],
_tickDomainCallback: [Function: _tickDomainCallback],
stdout: [Getter],
stderr: [Getter],
stdin: [Getter],
openStdin: [Function],
exit: [Function],
kill: [Function],
mainModule:
Module {
id: '.',
exports: {},
parent: null,
filename: '/Users/tugenhua/个人demo/process.js',
loaded: false,
children: [],
paths:
[ '/Users/tugenhua/个人demo/node_modules',
'/Users/tugenhua/node_modules',
'/Users/node_modules',
'/node_modules' ] } }

如上就可以看到 process是node的全局变量,并且process有env这个属性,但是没有NODE_ENV这个属性。

process.env 属性返回的是一个包含用户环境信息的对象,它可以区分开发环境或正式环境的依据,那么我们如何配置环境变量呢?

一. 如何配置环境变量:

直接在cmd环境配置即可,查看环境变量,添加环境变量,删除环境变量等操作。

1.1 windows环境配置如下:

#node中常用的到的环境变量是NODE_ENV,首先查看是否存在
set NODE_ENV #如果不存在则添加环境变量
set NODE_ENV=production #环境变量追加值 set 变量名=%变量名%;变量内容
set path=%path%;C:\web;C:\Tools #某些时候需要删除环境变量
set NODE_ENV=

1.2 Linux配置(mac系统环境也属于这个)

#node中常用的到的环境变量是NODE_ENV,首先查看是否存在
echo $NODE_ENV #如果不存在则添加环境变量
export NODE_ENV=production #环境变量追加值
export path=$path:/home/download:/usr/local/ #某些时候需要删除环境变量
unset NODE_ENV #某些时候需要显示所有的环境变量
env

如下查看环境变量,添加环境变量,删除环境变量操作如下:

显示所有的环境变量,如下图所示

注意:如果我们在命令行中设置环境变量后,比如设置 production 后,如下设置:
export NODE_ENV=production ,那么会在所有的项目下都是正式环境,当我们使用命令 npm install 后下载依赖包时,只会把 package.json中的dependencies依赖项下载下来,对于devDependencies中的依赖包是下载不下来的。
因此我们需要使用上面的命令 unset NODE_ENV 删除刚刚设置的环境变量。

二:理解 DefinePlugin 含义

官网(https://webpack.js.org/plugins/define-plugin/#usage)

官网解释的是: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 这个来区分正式环境还是开发环境即可。

三:理解 cross-env

1. 什么是cross-env呢?
它是运行跨平台设置和使用环境变量的脚本。

2. 它的作用是啥?

当我们使用 NODE_ENV = production 来设置环境变量的时候,大多数windows命令会提示将会阻塞或者异常,或者,windows不支持NODE_ENV=development的这样的设置方式,会报错。因此 cross-env 出现了。我们就可以使用 cross-env命令,这样我们就不必担心平台设置或使用环境变量了。也就是说 cross-env 能够提供一个设置环境变量的scripts,这样我们就能够以unix方式设置环境变量,然而在windows上也能够兼容的。

要使用该命令的话,我们首先需要在我们的项目中进行安装该命令,安装方式如下:

npm install --save-dev cross-env

然后在package.json中的scripts命令如下如下:

"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
"build": "cross-env NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
"build:dll": "webpack --config webpack.dll.config.js"
}

理解webpack之process.env.NODE_ENV详解(十八)的更多相关文章

  1. node与webpack的process.env.NODE_ENV

    先看两篇文章 1.前端工程项目的NODE_ENV 2. Node 环境变量 process.env.NODE_ENV 之webpack应用 3.process.env.NODE_ENV 下面全部是在w ...

  2. Nginx详解十八:Nginx深度学习篇之Rewrite规则

    Rewrite规则可以实现对url的重写,以及重定向 作用场景: 1.URL访问跳转,支持开发设计,如页面跳转,兼容性支持,展示效果等 2.SEO优化 3.维护:后台维护.流量转发等 4.安全 配置语 ...

  3. 理解webpack中的process.env.NODE_ENV

    参考资料 一. process 要理解 process.env.NODE_ENV 就必须要了解 process,process 是 node 的全局变量,并且 process 有 env 这个属性,但 ...

  4. Node 环境变量 process.env.NODE_ENV 之webpack应用

    转载来源:https://github.com/wfzong/NODE_ENV_TEST,这里还有源码可以学习,谢谢原作者的分享! 对于process.env.NODE_ENV困惑起因为在配置webp ...

  5. webpack(构建一个前端项目)详解--升级

    升级一个正式的项目结构 分离webpack.config.js文件: 新建一个webpack.config.base.js任何环境依赖的wbpack //public webpack const pa ...

  6. process.env.NODE_ENV理解

    1.理解NODE_ENV 在node中,有全局变量process表示的是当前的node进程.process.env包含着关于系统环境的信息.但是process.env中并不存在NODE_ENV这个东西 ...

  7. webpack配置中环境变量-process.env. NODE_ENV

    背景 webpack有一特性就是可以让使用者灵活的在不同环境(开发环境,生产环境等)进行相应的特性的策略打包,比如: 是否使用反向代理使用接口,针对不同的静态资源(如图片等)是直接拷贝还是进行打包编译 ...

  8. webpack vue2.0项目配置文件详解

    const path = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('h ...

  9. OS X获取process.env.NODE_ENV出错

    原来项目是其它小组在维护,现在我们需要维护部分功能,把项目带到OS X上运行发现 webpack.config.js获取process.env.NODE_ENV变量出错 解决: 根据电脑操作系统平台类 ...

随机推荐

  1. Java 多态 ——一个案例 彻底搞懂它

    最近,发现基础真的hin重要.比如,Java中多态的特性,在学习中就是很难懂,比较抽象的概念.学的时候就犯糊涂,但日后会发现,基础在日常工作的理解中占有重要的角色. 下面,我将用一个代码实例,回忆和巩 ...

  2. 2、买卖股票的最佳时机 II

    2.买卖股票的最佳时机 II 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能 ...

  3. webpack4 系列教程(五): 处理CSS

    这节课讲解webpack4中打包css的应用.v4 版本和 v3 版本并没有特别的出入. >>> 本节课源码 >>> 所有课程源码 教程所示图片使用的是 githu ...

  4. csharp: FTP Client Library using System.Net.FtpWebRequest

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  5. CDQ分治小结

    CDQ分治小结 warning:此文仅用博主复习使用,初学者看的话后果自负.. 复习的时候才发现以前根本就没写过这种东西的总结,简单的扯一扯 cdq分治的经典应用就是解决偏序问题 比如最经典的三维偏序 ...

  6. ArcGIS for Server 的修改IP问题

      ArcGIS for Server 的修改IP问题   1. [arcgisserver@centos6 ~]$ vi /home/arcgisserver/serverconfig/config ...

  7. Salesforce的基础用户界面定制

    Salesforce的用户界面 Salesforce的用户界面易于定制.本文将讲述如何定制: 主菜单和选项卡 自定义按钮和链接 视图列表 页面布局 定制主菜单和选项卡 Salesforce的主菜单默认 ...

  8. IDEA错误:Failed to start end point associated with ProtocolHandler [http-nio-9999] java.net.BindException: Address already in use: bind

    日志显示进程端口已被占用,首先需要的是查询什么进程占用了当前的9999端口. 1.win+R输入cmd进入命令界面: 2.输入命令  netstat -ano|findstr "端口号&qu ...

  9. 利用python中的gensim模块训练和测试word2vec

    word2vec的基础知识介绍参考上一篇博客和列举的参考资料. 首先利用安装gensim模块,相关依赖如下,注意版本要一致: Python >= 2.7 (tested with version ...

  10. mysql的varchar字段可以存储多少个中文字符

    创建数据库,并创建一张表mytb进行测试 ******************************************************************************* ...