[VUE] WebPack 打包后自动修改 dist 中 package.json 版本号

我们在开发 npm 包时，开发期的 package.json 通常并不一定是发布到 npm 仓库的 package.json。这种情况下每次改版本号需要改两个地方，比较麻烦。

我一般使用　webpack 进行打包，所以有了下面这个小插件。

插件源码

modify.version.plugin.js

/** 修改版本号 webpack 插件 */
function ModifyVersionPlugin(newVersion) {
  this.newVersion = newVersion;
}
 
ModifyVersionPlugin.prototype.apply = function(compiler) {
  compiler.hooks.emit.tap('ModifyVersionPlugin', function(compilation) {
    let assets = compilation.assets;
    let fileNames = Object.keys(assets);
    let version = this.newVersion;
    // 此项可以根据情况开启，用来更新源码中静态变量的值为当前版本号
    // 示例： const __VERSION__ = '__package_version__'
    // 打包后 __VERSION__  变量的值将变为当前版本号
    fileNames.forEach(function(fileName) {
      if (fileName === 'index.js') {
        let asset = assets[fileName];
        let assetSource = asset.source();
        // 将代码中的 __package_version__ 变量替换为版本号
        let updatedSource = assetSource.replace(/__package_version__/, version);
        asset.source = function() {
          return updatedSource;
        };
      }
    });
 
    // 修改 /dist/package.json 中的版本号
    try {
      const file = './dist/package.json';
      const fs = require('fs');
      let json = JSON.parse(fs.readFileSync(file, 'utf8'));
      console.log(json)
      json.version = version;
      fs.writeFileSync(file, JSON.stringify(json, null, 2));
    } catch (e) {
      console.error(e)
    }
  }.bind(this));
};
 
module.exports = ModifyVersionPlugin;

使用

• 将上面的 modify.version.plugin.js 保存到项目 package.json 同级目录中。
• 修改 webpack 配置，在 webpack.config.js 中添加如下代码：

const ModifyVersionPlugin = require('./modify.version.plugin.js');
 
...
 
const version = require('./package.json').version
console.log('Package version: ', version)
 
...
 
module.exports.plugins = (module.exports.plugins || []).concat([
  new ModifyVersionPlugin(version),
  ...
])
...