zoukankan      html  css  js  c++  java
  • 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"'
        })
      ]
    }
    

      

  • 相关阅读:
    [BZOJ]2589: Spoj 10707 Count on a tree II
    [BZOJ]2434: [Noi2011]阿狸的打字机
    Codeforces Round #408 (Div. 2)
    [BZOJ]2653: middle
    洛谷4月月赛R1
    2017省夏令营Day8
    2017省夏令营Day7
    2017省夏令营Day6
    【20170604校内模拟赛】香蕉
    【20170602模拟赛】秋之国的夏日祭
  • 原文地址:https://www.cnblogs.com/janney/p/11310368.html
Copyright © 2011-2022 走看看