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'))
})

复制代码