zoukankan      html  css  js  c++  java
  • webpack正式、测试环境接口地址本地运行及打包命令配置

    声明:本文由w3h5原创,转载请注明出处:《webpack正式、测试环境接口地址本地运行及打包命令配置》 https://www.w3h5.com/post/521.html

    为了方便开发,节省接口地址修改维护时间,可以通过 webpack 配置,区分正式、测试环境。

    webpack.png webpack正式、测试环境接口地址本地运行及打包命令配置 经验总结

    可以方便的通过一个命令或者参数,运行或者连接不同环境的接口地址:

    # 本地运行测试环境
    npm run dev
    
    # 本地运行正式环境 
    npm run prod
    
    # 测试环境打包
    npm run build
    
    # 正式环境打包
    npm run build prod

    先了解几个概念:

    process.argv :

    process 对象是一个全局变量,它提供当前 Node.js 进程的有关信息,以及控制当前 Node.js 进程。 因为是全局变量,所以无需使用 require()

    process.argv 属性返回一个数组,这个数组包含了启动 Node.js 进程时的命令行参数。

    其中:

    数组的第一个元素 process.argv[0] 返回启动 Node.js 进程的可执行文件所在的绝对路径。

    第二个元素 process.argv[1] 为当前执行的 JavaScript 文件路径。

    剩余的元素为其他命令行参数。

    例如运行:

    node process-args.js one two=three four

    此时:

    process.argv = ['/usr/local/bin/node', '<path>process-args.js', 'one', 'two=three', 'four']

    webpack 也同样支持 argv 参数,在 package.json 中配置命令:

    "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "prod": "webpack-dev-server --inline --progress --env=prod --config build/webpack.dev.conf.js",
      },

    我们就可以从 process.argv[4] 拿到 "--env=prod" 这个参数。

    打印出来的效果如下:

    # process.argv
    
    [ '/usr/local/bin/node',
      '/www/w3h5/node_modules/.bin/webpack',
      '--inline',
      '--progress',
      '--env=prod',
      '--config' ]

    配置方法:

    首先修改 webpack 的配置文件, /config/dev.env.js

    'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
    
    let params = process.argv[4]
    let baseUrl = ''
    
    switch (params) {
      case '--env=prod': //正式环境地址
        baseUrl = '"https://api.w3h5.com/"',//首页地址
        break
      default: //测试环境地址
        baseUrl = '"http://api-test.w3h5.com/"',//首页地址
    }
    
    module.exports = merge(prodEnv, {//process.env.HOME_URL
      NODE_ENV: '"development"',
      HOME_URL: baseUrl,//首页地址
    })

    先声明一个变量 params ,然后将 --env=prod (代表正式环境)赋值给它。

    使用 switch case 语句进行判断,如果有这个代表正式环境的参数,则使用正式环境的地址。如果没有这个参数,则默认走测试环境。

    然后将 HOME_URL 变量用 module.exports 导出。

    这样就可以通过 npm 命令来区分运行正式还是测试环境了。

    # 测试环境
    npm run dev
    
    # 正式环境
    npm run prod

    打包命令配置:

    和上面一样,修改  /config/prod.evn.js 文件:

    'use strict'
    
    let params = process.argv[2]
    let baseUrl = ''
    
    switch (params) {
      case 'prod': //正式环境地址
        baseUrl = '"https://api.w3h5.com/"',//首页地址
        break
      default: //测试环境地址
        baseUrl = '"http://api-test.w3h5.com/"',//首页地址
    }
    
    module.exports = merge(prodEnv, {//process.env.HOME_URL
      NODE_ENV: '"production"',
      HOME_URL: baseUrl,//首页地址
    })

    细心的朋友可能会注意到,这里给 params 赋得值是 process.argv[2] ,可以看一下 package.json 中配置的命令:

    "scripts": {
      "build": "node build/build.js"
    },

    因为 build 命令只有两个参数,执行下面的命令,就可以将第三个参数 prod 带过去:

    # 测试环境打包
    npm run build 
    
    # 正式环境打包
    npm run build prod

    前端直接调用

    项目运行后,前端就可以直接用 process.env.HOME_URL 获取到首页的地址了。

    测试环境会显示:http://api-test.w3h5.com/

    正式环境就是:https://api.w3h5.com/

    什么是 process.env :

    通常情况下,我们需要针对不同环境(开发环境、集成环境、生产环境等),进行相应策略的打包(比如是否替换接口地址,代码是否压缩等)。webpack 就是通过 process.env 属性加以区分。

    webpack 是 npm 生态中的一个模块,webpack 运行依赖于 node 环境。这里的 process.env 是Nodejs提供的一个API,它返回一个包含用户环境信息的对象。

    如果我们给 Nodejs 设置一个环境变量,并把它挂载在 process.env 返回的对象上,便可以在代码中进行相应的环境判断。

    process.env 属性返回一个对象,包含了当前 Shell 的所有环境变量。比如,process.env.HOME 返回用户的主目录。

    通常的做法是,新建一个环境变量 NODE_ENV ,用它确定当前所处的开发阶段,生产阶段设为 production ,开发阶段设为 development 或 testing ,然后在脚本中读取 process.env.NODE_ENV 即可。

    要说明的是,NODE_ENV 这个名称只是开发社区的一种共识,名称内容是可以修改的。如果需要,你也可以把它定义为 NODE_abc 或者 xxx 都行。

    参考文献:

    http://nodejs.cn/api/process.html#process_process_argv

    https://www.jianshu.com/p/19d199f93045

  • 相关阅读:
    HYSBZ 3813 奇数国
    HYSBZ 4419 发微博
    HYSBZ 1079 着色方案
    HYSBZ 3506 排序机械臂
    HYSBZ 3224 Tyvj 1728 普通平衡树
    Unity 3D,地形属性
    nginx 的naginx 种包含include关键字
    Redis 出现NOAUTH Authentication required解决方案
    mysql 8.0出现 Public Key Retrieval is not allowed
    修改jar包里的源码时候需要注意的问题
  • 原文地址:https://www.cnblogs.com/deshun/p/13264235.html
Copyright © 2011-2022 走看看