# wxa.js 如何使用 replace 插件实现版本号的方便更新

- Link: https://www.ixiqin.com/2021/01/29/wxa-js-how-to-use-the-replace-plug-in-implementation-convenient-update-version-number/
- Published: 2021-01-29T00:50:44+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2021/01/29/wxa-js-how-to-use-the-replace-plug-in-implementation-convenient-update-version-number/#)

 * [实现思路](https://www.ixiqin.com/2021/01/29/wxa-js-how-to-use-the-replace-plug-in-implementation-convenient-update-version-number/#%e5%ae%9e%e7%8e%b0%e6%80%9d%e8%b7%af)
 * [具体实现](https://www.ixiqin.com/2021/01/29/wxa-js-how-to-use-the-replace-plug-in-implementation-convenient-update-version-number/#%e5%85%b7%e4%bd%93%e5%ae%9e%e7%8e%b0)
 * [总结](https://www.ixiqin.com/2021/01/29/wxa-js-how-to-use-the-replace-plug-in-implementation-convenient-update-version-number/#%e6%80%bb%e7%bb%93)

小程序在开发过程中，如果可以在应用的某个地方加入版本号的显示，可以在后续 debug 的
过程中，快速的定位代码的版本。但在过去的开发过程中，我大多是手动修改版本号，这在
实际的使用过程中，经常会出现忘记修改版本号，或者代码中的版本号和实际在 git 中记录
的版本号不同，给自己在后续排除错误的时候增加困难。

不过，如果你在使用 wxa.js 的话，可以借助于 wxa.js 的 replace 插件来简化这个过程，
降低工作量。

## 实现思路

npm 项目在其 package.json 中是有一个 version 字段的，我们可以借助 npm 自带的 version
功能，来实现版本的自增，并自动打上 git 的 tag，简化开发工作。

## 具体实现

想要实现自动管理控制，你需要在你的 wxa 项目中安装其 replace 插件

    ```shcb-line-numbers
    npm i -S @wxa/plugin-replace
    Code language: CSS (css)
    ```

安装完成插件后，在`wxa.config.js`中引入 package.json，并添加一个replace 规则对象。

    ```javascript
    const ReplacePlugin = require('@wxa/plugin-replace');
    const package = require("./package.json")
    module.exports = {
        plugins: [
            // 一个规则对象，key 为目标字符串，value 为替换内容
            new ReplacePlugin({
              list: {
                'VERSION': package.version
              }
            })
        ]
    }
    Code language: JavaScript (javascript)
    ```

添加完成配置后，你就可以在你的小程序中的任何需要展示项目版本号的位置，新增一个 VERSION
字符串。后续在小程序开发过程中，这个版本号就会被替换为 package.json 中的版本号。

在后续开发时，当你完成了一个版本的开发时，就可以使用 `npm version` 命令来发布新的
版本。

npm version 命令常用的版本变更命令包括:

 * `npm version patch` : 变更 patch 版本号，比如 1.0.0 变为 1.0.1
 * `npm version minor` : 变更 minor 版本号，比如 1.0.0 变为 1.1.0
 * `npm version major` : 变更 major 版本号，比如 1.0.0 变为 2.0.0
 * 更多的命令可以访问 https://docs.npmjs.com/cli/v6/commands/npm-version 查看

执行了版本变更命令后，npm 会自动更新 package.json 中的版本号相关字段，并自动执行
commit & 执行 git tag 命令。

> 如果你需要自定义 git message ，可以在执行命令时，加入 -m 参数，npm 会自动把版本
> 号传递给 %s 字符串从而实现自定义的版本变更，比如 `npm version patch -m "Upgrade
> to %s for reasons"`。

## 总结

wxa.js 提供的 replace 插件，可以帮助我们在开发过程中，通过简单的文本替换来实现一些
简化工作流的功能， 如果你在使用 wxa.js 开发，不妨试试这个小技巧。