基于node的上线打包替换api地址的问题

我们经常遇到项目开发时候api的一个地址比如www.baidu.dev.com,上线之后要改成www.baidu.com的需求,可是webpack没有对应的插件,也可能是我没找到,于是乎,自己搞一个吧

const fs = require('fs')
const join = require('path').join
const path = require('path')
const chalk = require('chalk')
// 线上地址
const API_ROOT = 'www.baidu.com'

// 找目录下的所有文件
 findSync = (startPath) => {
  let result = []
   finder = (path) => {
    let files = fs.readdirSync(path)
    files.forEach((val, index) => {
      let fPath = join(path, val)
      let stats = fs.statSync(fPath)
      if (stats.isDirectory()) {
        finder(fPath)
      }
      if (stats.isFile()) {
        result.push(fPath)
      }
    })
  }

  finder(startPath)
  return result
}

let fileNames = findSync('./dist/static/js')
fileNames.forEach(item => {
  fs.readFile(item, (err, data) => {
    data = data + ''
// 测试地址
    if (data.indexOf('www.dev.baidu.com') != -1) {
      data = data.replace('www.dev.baidu.com', API_ROOT)
      fs.writeFile(item, data, (err) => {
        if (err) throw err
        console.log(chalk.blue('文件', item))
        console.log(chalk.red('路径替换完毕', API_ROOT))
      })
    }
  })
})

搞定
还可以加到 package 里面 ,通过npm 来运行,这个看自己的需求了

--------------------------------------大大的分割线---------------------------------------------

突然脑洞打开,webpack没有类似的插件,但是webpack有dev环境和prod环境,这样一来就好说了,上步骤

1.找到dev.env.js,初始是这样的

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
})

我们在env下面加入API_ROOT: '"baidu.dev.com"'
现在是这样

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"baidu.dev.com"'
})

2.找到prod.env.js,初始是这样的

'use strict'
module.exports = {
  NODE_ENV: '"production"',
}

我们在env下面加入 API_ROOT: '"baidu.com"'

现在是这样

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"baidu.com"'
}

3.修改定义api的地方,从process.env里面拿API_ROOT,改成如下
export const API_ROOT = process.env.API_ROOT

总结 npm run dev 的时候因为是开发环境,所以API_ROOT是dev.baidu.com,
npm run build 的时候是生产环境,API_ROOT是baidu.com,好了,玩耍吧