Angular一鍵打包20個不一樣的環境配置

前言

• github源碼

寫這個腳本的初衷，是由於公司基於 Angular5 作了一個內網項目，一套代碼，10-20個不一樣後臺服務環境，每次升級項目，須要修改 environment文件，一個一個的敲ng build命令，打包半天，這個腳本的思路是把後臺的服務地址、服務器名稱等變量放到一個數組裏面，不用去修改 environment 文件夾 和 angular-cli.json 文件下的配置，只須要管理這個數組，動態的建立 enviroment.ts 文件和修改 angular-cli.json文件，運行 npm run multienv 命令，就能一次打包 20 個不一樣的環境配置。

開始

克隆項目後，執行下面的命令

npm install
複製代碼

在 build/environments.config.js 裏面維護環境配置

執行下面的命令，開始一鍵打包多環境

npm run multienv
複製代碼

貼上部分代碼:

#!/user/bin/env node

var fs = require('fs');
const chalk = require('chalk')
const ora = require('ora')
var environmentsConfig = require('./environments.config.js')
const logSymbols = require('log-symbols');
const {
  exec
} = require('child_process');
var buildCmd = ''
var writeJson = ''
// 不一樣的環境配置管理
const environments = environmentsConfig
var ngCliJson = './.angular-cli.json'
/** * 讀取json文件，並轉爲json對象 */
function getPackageJson(url) {
  let spinner = ora('Loading' + url).start()
  var result = fs.readFileSync(url)
  spinner.color = 'yellow'
  spinner.text = '讀取 ' + url + ' 成功!'
  spinner.succeed()
  return JSON.parse(result)
}
// 獲取angular-cli的json對象
var packageData = getPackageJson(ngCliJson)
const spinner2 = ora('開始批量建立多個environment.ts文件. \n').start()
/** * 根據配置建立文件 * @param {*} config */
function createFileByConfig(config) {
  if (config.length === 0) return;
  for (let i = 0; i < config.length; i++) {
    let fileName = config[i].fileName
    let apiurl = config[i].apiurl
    let systemurl = config[i].systemurl
    let outDir = config[i].outDir
    let envUrl = config[i].envUrl
    var envConfig = ` export const environment = { production: true, pid: 'ng-multien-build', projectName: 'angular一鍵打包多環境', systemurl: '${systemurl}', apiurl: '${apiurl}', port: '8080', license: '', outDir: '${outDir}' }; `
    // 批量寫入多個environment.ts文件
    fs.writeFile(fileName, envConfig, function (err) {
      if (err) {
        return console.error(logSymbols.error, err)
      }
      spinner2.color = 'yellow'
      spinner2.text = '建立' + fileName + ' 成功!'
      spinner2.succeed()
    })
    buildCmd += (i < config.length - 1) ? `ng build --output-path=dist/${outDir} --prod --aot=false -env=${outDir} && ` : `ng build --output-path=dist/${outDir} --prod --aot=false --env=${outDir}`
    packageData.apps[0].environments[outDir] = envUrl
  }
  // 循環完後修改文件
  writeJson = JSON.stringify(packageData, null, 6)
  // 在 angualar-cli.json 中寫入 environments 的配置
  fs.writeFile(ngCliJson, writeJson, function (err) {
    if (err) {
      return console.error(logSymbols.error, err)
    }
    console.log(logSymbols.success, '在 angualar-cli.json 中修改 environments 的配置')
  })
}

// 經過不一樣的環境配置建立文件
createFileByConfig(environments)
// 輸出 打包命令
setTimeout(() => {
  console.log(chalk.blue.bgRed('\n build command:\n') + chalk.blue.bgYellow(buildCmd))
}, 1000)

// 開始打包

// 輸出當前目錄（不必定是代碼所在的目錄）下的文件和文件夾
const spinner3 = ora('start build...').start()
spinner3.color = 'yellow'
spinner3.text = 'Start build please wait... \n';
exec(buildCmd, (err, stdout, stderr) => {
  if (err) {
    console.log(logSymbols.error, err);
    return;
  }
  console.log(logSymbols.success, `==========>stdout: ${stdout}`);
  console.log(logSymbols.error, `===========>stderr: ${stderr}`);
  spinner3.succeed()
  console.log(chalk.yellow.bgGreen('\n All build tasks have been completed！\n'))
})

複製代碼