ng build打包文件结构调整

发表于

使用angular , cli的项目, 用ng build 打包, 打包出来的文件会直接放在配置的路径下, 自带hash值.

问题

之前采用的部署方法是直接替换调服务器上的所有文件, 这样会有一个删除服务器上原来的文件, 然后在考入新文件的一个过程. 当采用按模块懒加载后, 出现一个问题, 原来打开的页面无法老区老的js, 因为老的js部署时已经被删除, 导致页面出现假死状态.

解决

为了解决这个问题, 我的想法是将打包出的js去除hash值,放在一个以时间戳命名的文件夹下, 每次部署时, 不清楚服务器上的文件, 直接把新打包的文件替换掉. 这样就不会出现原来的问题, 而且可以从index.html文件的引用直接看出发布时间, 也可以方便以回滚.

解决方法

  1. 改变js的引入路径配置,

    在.angular-cli.json中, 可以配置应用js的路径位置. 在 apps 下 配置’deployUrl’: ‘你想配置的位置(这里我采用的的是时间戳)’

    为了采用当前时间的时间戳, 我写了一个脚本, 在每次ng build前改变deployUrl的值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    var fs = require('fs');
    // 获取时间戳
    const helper = {
      getVersion: function () {
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        if (month < 10) {
          month = '0' + month;
        }
        let day = date.getDate();
        if (day < 10) {
          day = '0' + day;
        }
        let hour = date.getHours();
        if (hour < 10) {
          hour = '0' + hour;
        }
        let minutes = date.getMinutes();
        if (minutes < 10) {
          minutes = '0' + minutes;
        }
        let seconds = date.getSeconds();
        if (seconds < 10) {
          seconds = '0' + seconds;
        }
        return `${year}${month}${day}${hour}${minutes}${seconds}`;
      }
    };
    // 获取.angular-cli.json文件内容
    var indexString = JSON.parse(fs.readFileSync('./.angular-cli.json', 'utf8', (err) => {
      if (err) {
        console.log(err);
      }
    }))
    // 修改angular-cli.json文件引用路径deployUrl
    indexString.apps[0].deployUrl = helper.getVersion()+'/';
    // 重新.angular-cli.json文件
    fs.writeFile('./.angular-cli.json', JSON.stringify(indexString), (err) => {
      if (err) {
        return console.error(err);
      }
      console.log("用时间戳", indexString.apps[0].deployUrl, "打包！");
    })

    ​

  2. 打包, 打包时去掉hash值

    在运行ng build 是可以配置去掉hash值

    1
    ng build --prod - --aot --output-hashing=none

  3. 改变打包出文件的位置

    这里也写了一个小脚本, 来讲文件移动到我们之前第一步时在.angular-cli.json定义的位置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    var fs = require('fs');
    // 获取.angular-cli.json中配置的文件名filename
    var indexString = JSON.parse(fs.readFileSync('./.angular-cli.json', 'utf8', (err) => {
      if (err) {
        console.log(err);
      }
    }))
    var filename =  indexString.apps[0].deployUrl.substring(0,indexString.apps[0].deployUrl.length-1);
    console.log(filename)
    // 新建filename文件夹
    fs.mkdir('dist/' + filename, function (err) {
      if (err) {
        console.log(err);
      }
    })
    // 移动除index.html和assets文件的其他文件到filename文件夹下
    function walk(path) {
      var dirList = fs.readdirSync(path);
      dirList.forEach(function (item) {
        if (item !== 'index.html' && item != filename && item != 'assets' ) {
          fileList.push(`${item}`);
          fs.rename(`${path}/${item}`, `${path}/${filename}/${item}`, function (err) {
            if (err) throw err;
            console.log(item + '---  end');
          })
        }
      });
    }
    walk('dist');// 原来生成文件的位置

此时你编译出来的文件将是dist下只有两个部分: