我正在参加「掘金·启航计划」,快来一起参与吧!
我正在参加「掘金·启航计划」
前言
目前,公司有一些项目,需要调用第三方接口,然而,第三方接口在另一个城市,家里肯定无法调通这些接口。这种情况下,根据接口文档,在本地造了一些假数据,可是在打包的时候,我并不希望这些本地测试代码
被打包进项目,怎么办呢?
需要做到以下两点:
- 生产环境,自动删掉这些代码
- 本地环境,仍然需要这些代码
占位符
在这些需要特殊处理的文件内,放入自定义的占位符,如下图所示:
本地环境时,读取文件,在占位符之间插入本地测试代码
生产环境时,通过占位符,获取到需删除的索引位置,将本地测试代码
删掉
注入本地测试代码
在项目的根目录下,新建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
解析报错,如下图所示:
通过上网查找,以为对象的key
和value
必须用双引号
,改了却没什么用。无奈之下,只能用纯JSON
字符串拼接代码,在拼接的过程中,需要注意的点如下所示:
双引号
需要使用转义字符\\
,如"data"
转义之后变为\\"data\\"
换行符
使用\\r\\n
createDevFiles.js
代码里的其他知识点如下所示:
process.cwd()
:当前Node.js进程执行时的文件夹地址const startIndex = oldString.indexOf('//$start') + 8
:8
为//$start
的长度,因为在插入新字符串后,仍需要保留占位符//$start
slice
:**array.slice(start,end)**
,start
必填,为新数组的起始位置,若为负数,则表示从数组尾部开始算起(-1
指最后一个元素,-2
指倒数第二个元素,以此类推);end
可选,设定新数组的结束位置;如果不填写该参数,默认到数组结尾;如果是负数,则表示从数组尾部开始算起
在项目根目录下,运行如下命令:
node build/createDevFiles.js
见证奇迹的时刻到啦,如下图所示:
已成功在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
文件内的代码,注入的本地测试代码
已被删除,如下图所示:
添加脚本命令
在package.json
里,添加如下图的命令:
可以修改serve
的命令为"npm run jiao-dev && vue-cli-service serve"
,这样,每次本地运行时,会自动注入本地测试代码
同理修改build
的命令为"npm run jiao-build && vue-cli-service build --report"
,打包时自动删除本地测试代码
尾声
拼接字符串的方式是不得已为之,如果大家有更好的解决办法,欢迎在评论区留言。
如果感觉这篇文章对你有帮助,希望能不吝小手,点个赞~~