参考资料

一. process

要理解 process.env.NODE_ENV 就必须要了解 process,process 是 node 的全局变量,并且 process 有 env 这个属性,但是没有 NODE_ENV 这个属性。大家可以创建一个 js (比如index.js)文件,然后打印 process(console.log(process)),在 node 环境下运行 node index.js,就可以看到 process 里面所有的内容(可以看到里面有 env 这个属性)。

二. process.env.NODE_ENV 的作用

  1. 这个变量并不是 process.env 直接就有的,而是通过设置得到的。
  2. 这个变量的作用是:我们可以通过判断这个变量区分开发环境或生产环境。

三. 如何设置 process.env.NODE_ENV

  1. 上面是 webpack 官网的原话,当我们设置 mode 为 development 或者 production时,webpack
    会自动的进行一些设置(当然设置了模式以后,webpack会自动的为项目添加一些插件)

    mode: development --> process.env.NODE_ENV = development
    mode: production --> process.env.NODE_ENV = production
    默认情况下 --> process.env.NODE_ENV = production

  2. 采用mode的方式完全可以满足我们的要求,当然webpack3或者以下的同学,就需要通过通过 webpack 自带的一个插件 DefinePlugin 完成设置工作,采用这种方式设置的时候,值对应的格式必须是"'env'"这种格式,所以会用 JSON.stringify 进行转换。
    plugins: [ new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify('env') }), ]

  3. 如果设置的值不是 development 或者 production,就会出现上面图中的最后一个方框的情况,不会自动设置mode,它就会在打包或者本地启动的时候进行提示,叫你设置对应的模式。

  4. 将 process.env.NODE_ENV 与启动命令行结合起来


    当我们这么操作的时候,就相当于将 process.env.NODE_ENV 的值与启动命令行结合了起来,这里可以看到我们用到了 cross-env ,这是一个能跨平台地设置及使用环境变量的工具,如果没有它,无法进行 NODE_ENV=hahaha 这样的操作,当然 cross-env 也必须直接放到它的前面。(通过下面的命令进行安装)
    npm install cross-env --save-dev

  5. 这儿有必要说一下,上面通过 JSON.stringify(process.env.NODE_ENV) 进行赋值操作,并不意味着可以在不使用 webpack.DefinePlugin 定义 process.env.NODE_ENV 前直接就可以将它拿来使用,如果我们在没有使用 webpack.DefinePlugin 的情况下,打印 JSON.stringify(process.env.NODE_ENV),还是会打印出我们熟悉的默认值 production。

  6. 所以我们这儿一定要记住,如果没有直接设置mode,或者通过 webpack.DefinePlugin 定义的 process.env.NODE_ENV,那么 process.env.NODE_ENV 的值就是默认的 production。如果要想scripts 里面的设置起作用,那么就必须通过上面4中的设置进行。

理解webpack中的process.env.NODE_ENV的更多相关文章

  1. 理解webpack之process.env.NODE_ENV详解(十八)

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

  2. process.env.NODE_ENV理解

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

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

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

  4. node与webpack的process.env.NODE_ENV

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

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

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

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

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

  7. node服务开发环境判断和启动端口指定---process.env.NODE_ENV

    在node启动的时候我们需要在代码里面判断服务器运行环境 可以根据process.env.NODE_ENV来判断 一.开发环境的判断 1.安装 npm i -g cross-env 2.启动 cros ...

  8. sysUpload.vue上传组件 的时候 看进度的时候 不要mock 注释掉 // if (process.env.NODE_ENV !== 'production') require('@/mock')

    上传组件 的时候 看进度的时候 不要mock 注释掉 // if (process.env.NODE_ENV !== 'production') require('@/mock') <!-- * ...

  9. process.env.NODE_ENV

    Node 随记 if (process.env.NODE_ENV === 'production') { module.exports = require('./prod.js') } else { ...

随机推荐

  1. 【Dart学习】--Dart之超级父类之Object

    一,概述 -- Object Dart语言和Java一样,都是面向对象语言,所有的类也都有个公共的父类----->Object.该类位于Dart sdk核心库core目录下. 二,构造方法 // ...

  2. 使用C#登录带验证码的网站

    我在上一篇文章中已经讲解了一般网站的登录原来和C#的登录实现,很多人问到对于使用了验证码的网站该怎么办,这里我就讲讲验证码的原理和对应的登录方法.验证码的由来几年前,大部分网站.论坛之类的是没有验证码 ...

  3. hashmap:cr:csdn

    HashMap相关问题 1.你用过HashMap吗?什么是HashMap?你为什么用到它? 用过,HashMap是基于哈希表的Map接口的非同步实现,它允许null键和null值,且HashMap依托 ...

  4. [20190727NOIP模拟测试9]单(single) 题解(树上dp)

    啊啊啊啊啊啊啊啊考场上差一点就A掉了5555 千里之堤溃于蚁穴……鬼知道最后一步那么显然的柿子我为什么没考虑用上…… 观察数据范围可知,出题人期望我们想出一个$O(n)$的做法 当然也有可能是$O(n ...

  5. php面试专题---1、php中变量存储及引用的原理

    php面试专题---1.php中变量存储及引用的原理 一.总结 一句话总结: 查看变量的存储结构可以安装xdebug扩展,用xdebug_debug_zval()方法,不推荐使用memory_get_ ...

  6. 北风设计模式课程---外观模式(Facade)总结

    北风设计模式课程---外观模式(Facade)总结 一.总结 一句话总结: 不仅要通过视频学,还要看别的博客里面的介绍,搜讲解,搜作用,搜实例 设计模式都是对生活的抽象,比如用户获得装备,我可以先装备 ...

  7. LINUX为什么要进行内核移植 内核移植的作用

    LINUX为什么要进行内核移植 内核移植的作用,不移植能用么?   LZ的问题应该是为什么要重新编译内核吧.既然你已经可以跑了,证明你现在用的内核已经移植到你用的硬件上,自然你也不需要做什么移植.通常 ...

  8. 【转】Selenium 加载Chrome/Firefox浏览器配置文件

    原文地址:https://www.cnblogs.com/eastonliu/p/9083982.html Selenium启动浏览器时,默认是打开一个新用户,不会加载原有的配置以及插件.但有些时候我 ...

  9. sizeof 运算结果与编译系统有关

    研究与实现相关的layout没多大意义 参考:有关c++中类的虚拟继承sizeof问题 情况1:<剑指offer>纪念版题,sizoef(空类)的结果? class A{}; sizeof ...

  10. 如何通过HTTP API 调取tushare的股票数据

    长久以来,Tushare一直以固定的Python SDK方式为大家提供数据服务. 虽然在基于Python的数据分析和Python的量化策略开发很方便,但习惯用其他语言的同学们表示了“抗议”,于是在Tu ...