Taro請求域名配置

背景

使用Taro進行小程序的開發，調用后端api獲取信息，開發，測試，正式環境的域名是不同的。最初始的版本中，我們在不同環境中不斷修改域名信息。這樣造成一個問題，提交審核的時候我們一定要記得將域名改成正式版，不然會出現問題。這種人為控制，顯然不能保證百分百沒有問題。我們就考慮是不是可以通過process.env來區分不同的環境

嘗試使用process.env解決問題

修改配置文件

原配置文件

export const baseUrl = 'https://release.com/';

修改后配置文件

let baseUrlPrefix = ''
const env = process.env.NODE_ENV === 'development' ? 'development' : 'production'
console.log(process.env.NODE_ENV)
switch (env) {
    case 'development':
        baseUrlPrefix = 'http://dev.com/'
        break
    case 'production':
        baseUrlPrefix = 'https://release.com/' 
        break
}
export const baseUrl = baseUrlPrefix

執行命令查看

執行命令

npm run dev:weapp

發現控制台輸出的process.env.NODE_ENV=development

執行命令

npm run build:weapp

發現控制台輸出的process.env.NODE_ENV=production

執行結果說明一個問題，我們是可以通過process.env進行判斷的開發環境和正式環境

那么我們遺留下來一個問題：測試環境怎么辦？

測試環境怎么設置

執行npm run dev和build的區別

查看package.json文件

"scripts": {
    "build:weapp": "taro build --type weapp",
    "dev:weapp": "npm run build:weapp -- --watch"
 }

可以看出，dev和build的差別就是--watch，那么是不是--watch設置的process.env？

--watch為什么使process.env=development

查看源碼 taro-build

program
  .option('--type [typeName]', 'Build type, weapp/swan/alipay/tt/h5/quickapp/rn/qq/jd')
  .option('--watch', 'Watch mode')
  .option('--page [pagePath]', 'Build one page')
  .option('--component [pagePath]', 'Build one component')
  .option('--env [env]', 'Env type')
  .option('--ui', 'Build Taro UI library')
  .option('--ui-index [uiIndexPath]', 'Index file for build Taro UI library')
  .option('--plugin [typeName]', 'Build Taro plugin project, weapp')
  .option('--port [port]', 'Specified port')
  .option('--release', 'Release quickapp')
  .parse(process.argv)

const { type, watch, ui, port, release, page, component, uiIndex } = program
let { env, plugin } = program

env = process.env.NODE_ENV || env

if (env) {
  process.env.NODE_ENV = env
} else {
  if (watch) {
    process.env.NODE_ENV = 'development'
  } else {
    process.env.NODE_ENV = 'production'
  }
}

這里可以看到當env不存在的時候，如果執行參數里面有watch就設置process.env.NODE_ENV = 'development'，否則就是'production'。

到這里你是不是發現了什么端倪？

端倪

除了--watch之外，taro執行build命令的時候還接受一個參數--env，設置當前所在環境的，那么我們的測試環境是不是可以通過這個參數設置來實現呢？

我們來修改一下package.json

"scripts": {
    "build:weapp": "taro build --type weapp",
    "dev:weapp": "npm run build:weapp -- --watch",
    "test:weapp": "npm run test:weapp -- --watch --env test"
 }

修改配置文件

let baseUrlPrefix = ''
const env = process.env.NODE_ENV === 'development' ? 'development' : (process.env.NODE_ENV === 'test' ? 'test' : 'production')
console.log(process.env.NODE_ENV)
switch (env) {
    case 'development':
        baseUrlPrefix = 'http://dev.com/'
        break
    case 'test':
        baseUrlPrefix = 'https://test.com/' 
        break
    case 'production':
        baseUrlPrefix = 'https://release.com/' 
        break
}
export const baseUrl = baseUrlPrefix

執行命令

npm run test:weapp

想象一下打印出來的process.env.NODE_ENV是什么？

發生了什么？

process.env.NODE_ENV = 'production'，為什么？

我們來看看我們的應用的config文件夾里面的index.js做了什么

module.exports = function (merge) {
    if (process.env.NODE_ENV === 'development') {
        return merge({}, config, require('./dev'))
    }
    return merge({}, config, require('./prod'))
}

我們設置的process.env.NODE_ENV應該是test，走到這里webpack的配置文件使用的是prod的配置，我們看看prod.js里面寫了什么

module.exports = {
    env: {
        NODE_ENV: '"production"'
    },
    defineConstants: {
    },
    mini: {},
    h5: {
        /**
         * 如果h5端編譯后體積過大，可以使用webpack-bundle-analyzer插件對打包體積進行分析。
         * 參考代碼如下：
         * webpackChain (chain) {
         *   chain.plugin('analyzer')
         *     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
         * }
         */
    }
}

看到了嗎，這里把NODE_ENV又重置成了production，我們來嘗試調整

增加test配置

增加test.js配置在config文件夾中

module.exports = {
    env: {
        NODE_ENV: '"test"'
    },
    defineConstants: {
    },
    mini: {},
    h5: {}
}

修改index.js

module.exports = function (merge) {
    if (process.env.NODE_ENV === 'development') {
        return merge({}, config, require('./dev'))
    } else if (process.env.NODE_ENV === 'test') {
        return merge({}, config, require('./test'))
    }
    return merge({}, config, require('./prod'))
}