不想将部分代码打包到生产环境,怎么办?

5,019 阅读2分钟

我正在参加「掘金·启航计划」,快来一起参与吧!

我正在参加「掘金·启航计划」

前言

目前,公司有一些项目,需要调用第三方接口,然而,第三方接口在另一个城市,家里肯定无法调通这些接口。这种情况下,根据接口文档,在本地造了一些假数据,可是在打包的时候,我并不希望这些本地测试代码被打包进项目,怎么办呢?

cb08411614ea4b69aea2e0f670633e0b.png

需要做到以下两点:

  1. 生产环境,自动删掉这些代码
  2. 本地环境,仍然需要这些代码

占位符

在这些需要特殊处理的文件内,放入自定义的占位符,如下图所示:

674ce83c5e5944459e1dca8f94431191.png

本地环境时,读取文件,在占位符之间插入本地测试代码

生产环境时,通过占位符,获取到需删除的索引位置,将本地测试代码删掉

注入本地测试代码

在项目的根目录下,新建build文件夹,在build文件夹下创建createDevFiles.js,完整的代码如下所示:

const path = require('path');
const fs = require('fs-extra');

const resultDevJs = `      \\r\\n        setTimeout(() => {\\r\\n          this.info = {\\r\\n           \\"fjhm\\": \\"2601\\",\\r\\n           \\"ldmc\\": \\"弘雅花园一期1栋\\",\\r\\n           \\"wgmc\\": \\"新乐20\\",\\r\\n           \\"lx\\": \\"城中村\\",\\r\\n           \\"total\\": \\"0\\",\\r\\n           \\"peopleTotal\\": \\"120\\",\\r\\n           \\"lon\\": 113.86327552,\\r\\n          \\"lat\\": 22.55807672\\r\\n           }\\r\\n           this.$store.commit(\\"aoiBuildingRoom/SET_MAP_LOCATION\\", {position: [this.info.lon, this.info.lat] , distance: 200});\\r\\n          const { lv, code } = this.addressDetail\\r\\n        if (lv === 9) {\\r\\n           buildingHighLight(code);\\r\\n     } else if (lv === 11) {\\r\\n           houseHighLight(code);\\r\\n        }\\r\\n       }, 200)\\r\\n       return\\r\\n`

function insertLocaleCodes(targetPath, filename, insertStr) {
    const oldString = JSON.stringify(fs.readFileSync(path.join(targetPath, filename), 'utf-8'))
    const startIndex = oldString.indexOf('//$start') + 8;
    const endIndex = oldString.indexOf('//$end');
    const newString = oldString.slice(0, startIndex) + insertStr + oldString.slice(endIndex)

    fs.outputFileSync(path.join(targetPath, filename), JSON.parse(newString), 'utf8');

}

function createDevFiles() {
    const cwd = process.cwd();
    const targetPath= path.join(cwd, `./src/pages/index/views/solution/components/search-function`);
    const searchAddressPath = path.join(targetPath, `./search-address`);

    insertLocaleCodes(searchAddressPath, 'result.jsx', resultDevJs);
}

createDevFiles();

其实,最开始,resultDevJs变量的代码如下所示:

const resultDevJs = `setTimeout(() => {
    this.info = {
        fjhm: '2601',
        ldmc: '弘雅花园一期1栋',
        wgmc: '新乐20',
        lx: '城中村',
        total: 80,
        peopleTotal: 120,
        lon: 113.86327552,
        lat: 22.55807672
    }
    this.$store.commit('aoiBuildingRoom/SET_MAP_LOCATION', { position: [this.info.lon, this.info.lat] , distance: 200});
    const { lv, code } = this.addressDetail
    if (lv === 9) {
        buildingHighLight(code);
    } else if (lv === 11) {
        houseHighLight(code);
    }
    this.loading = false
}, 200)
return`

但是,当我使用JSON.parse(JSON.stringify(resultDevJs))JSON解析报错,如下图所示:

47c74980b86a42c1867ddd13938ebf14.png

通过上网查找,以为对象的keyvalue必须用双引号,改了却没什么用。无奈之下,只能用纯JSON字符串拼接代码,在拼接的过程中,需要注意的点如下所示:

  • 双引号需要使用转义字符\\,如"data"转义之后变为\\"data\\"
  • 换行符使用\\r\\n

createDevFiles.js代码里的其他知识点如下所示:

  • process.cwd()当前Node.js进程执行时的文件夹地址
  • const startIndex = oldString.indexOf('//$start') + 88//$start的长度,因为在插入新字符串后,仍需要保留占位符//$start
  • slice: **array.slice(start,end)**start必填,为新数组的起始位置,若为负数,则表示从数组尾部开始算起(-1指最后一个元素,-2指倒数第二个元素,以此类推);end可选,设定新数组的结束位置;如果不填写该参数,默认到数组结尾;如果是负数,则表示从数组尾部开始算起

在项目根目录下,运行如下命令:

node build/createDevFiles.js

见证奇迹的时刻到啦,如下图所示:

d6e235b1423f42f8a18795282e31fe0d.png

已成功在result.jsx文件内注入本地测试代码,但如何在生产环境删除它呢?

删除本地测试代码

build文件夹下创建createProductFiles.js,完整的代码如下所示:

const path = require('path');
const fs = require('fs-extra');

function removeLocaleCodes(targetPath, filename) {
    const source = JSON.stringify(fs.readFileSync(path.join(targetPath, filename), 'utf-8'))
    const startIndex = source.indexOf('//$start') + 8;
    const endIndex = source.indexOf('//$end');

    const newSource = JSON.parse(source.slice(0, startIndex) +  "\\r\\n" + source.slice(endIndex));

    fs.outputFileSync(path.join(targetPath, filename), newSource, 'utf8');
}

function createProductFiles() {
    const cwd = process.cwd();
    const targetPath= path.join(cwd, `./src/pages/index/views/solution/components/search-function`);
    const searchAddressPath = path.join(targetPath, `./search-address`);

    removeLocaleCodes(searchAddressPath, 'result.jsx');
}

createProductFiles();
  • JSON.parse(source.slice(0, startIndex) + "\\r\\n" + source.slice(endIndex)):在中间插入"\\r\\n",是为了保持俩占位符(//$start和//$end)之间的换行符

在项目根目录下,运行如下命令:

node build/createProductFiles.js

执行完之后,再看result.jsx文件内的代码,注入的本地测试代码已被删除,如下图所示:

561742af28ff4042b73f8f47f0570a2a.png

添加脚本命令

package.json里,添加如下图的命令:

458cb29dfe9246b9935e4afc684a9237.png

可以修改serve的命令为"npm run jiao-dev && vue-cli-service serve",这样,每次本地运行时,会自动注入本地测试代码

同理修改build的命令为"npm run jiao-build && vue-cli-service build --report",打包时自动删除本地测试代码

尾声

拼接字符串的方式是不得已为之,如果大家有更好的解决办法,欢迎在评论区留言。

如果感觉这篇文章对你有帮助,希望能不吝小手,点个赞~~