快应用代码中,如何区分环境? - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

快应用代码中,如何区分环境?

发表时间:2021-1-5

发布人:葵宇科技

浏览次数:76

在程序开发中,涉及到后台接口调用,一般需要根据环境不同( 正式测试 ),以便于可以调用不同 API,而不用手动修改代码。快应用代码中,如何区分环境呢?本篇文章,跟大家一起探讨下这个问题。

答案是,借助 process.env.NODE_ENV 来判断。下面,对这一结论做下说明。

process.env.NODE_ENV

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

可以进入到 node 的 repl 环境中,执行 process.env 命令,查看查 process 的基本信息:

如何设置环境变量

如上操作,就可以看到 process 是 node 的全局变量,并且 process 有 env 这个属性,没有 NODE_ENV 这个属性。那么在 Web 开发中,如何设置呢?如果基于 Webpack 打包,一般性操作,在运行命令时携带参数,具体如下示例:

// package.json
"scripts": {
  "start": "node build/dev-server.js",
  "deploy": "npm run build && node build/deploy.js",
  "build": "cross-env NODE_ENV=production node build/build.js --progress",
  "build:dll": "NODE_ENV=production webpack --config build/webpack.dll.conf.js",
  //......
}

在 Windows 系统,并不能很好支持如上操作;可以借助 cross-env (:twisted_rightwards_arrows: Cross platform setting of environment scripts) 库来辅助完成。

快应用中的 NODE_ENV

快应用构建工具 —— hap-toolkit ,也是基于 Webpack 所打造。所以,完全可以使用 process.env.NODE_ENV 来判断环境。为更好开发快应用,官方提供了 快应用开发工具 ,即 IDE。快应用 IDE 已经帮着集成 hap-toolkit ,像编译构建操作,就无需借助 package.json 中 scripts 来完成。那么快应用开发中该如何设置 NODE_ENV 呢?

答案是:在快应用开发中 无需设置 NODE_ENV,直接使用即可。

这是因为,自 Webpack4 之后,所指定的 mode 值,为 process.env.NODE_ENV 数据源。在快应用构建时候,IDE 已经传递对应 mode( production or development )给到 hap-toolkit (Webpack),因此用户无需自行设置。在代码中,直接使用如下判断处理即可:

const isProductionEnv = process.env.NODE_ENV !== 'production'
if (isProductionEnv) {
  // do something
}
// quickapp.config.js
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')

module.exports = {
  cli: {
    devtool: 'none'
  },
  webpack: {
    plugins: [
      new webpack.DefinePlugin({
        ENV_TYPE: process.env.NODE_ENV
      }),
      new HardSourceWebpackPlugin({
        environmentHash: {
          root: __dirname,
          directories: [],
          files: ['package-lock.json']
        },
        cachePrune: {
          // 缓存的存在时间,默认为两天
          maxAge: 2 * 24 * 60 * 60 * 1000,
          // 缓存的最大容量,默认为 50 MB
          sizeThreshold: 50 * 1024 * 1024
        }
      })
    ]
  }
}

相关案例查看更多