前言

在前一篇文章里，我提到过，很不愿意采用字符串拼接本地测试代码的方式，经过这两天的思索，找到一个比较好的替代方式，即replace，具体内容见正文

感谢掘友coderEDC、不要秃头啊在第一篇文章里的留言，让我获益匪浅

replace

我们仍然可以使用ES6 模板字符串的方式编写本地测试代码，具体代码如下所示

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

const tempJs = `//$start
        setTimeout(() => {
            this.info = {
                "mc": "test"
            }
        })
//$end`

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`);

    let template = fs.readFileSync(path.join(searchAddressPath, 'result.jsx'), 'utf-8')
    const newSource = template.replace('/* DEV_CODE */', tempJs)

    fs.writeFileSync(path.join(searchAddressPath, 'result.jsx'), newSource);
}

我们需在result.jsx文件内放置占位符/* DEV_CODE */，如下图所示：

使用replace方法，将占位符/* DEV_CODE */替换成tempJs

但这种方法也有缺点，即只能运行一次，因为执行完一次后，占位符/* DEV_CODE */已被删除，若需再次删除本地测试代码，需在该代码内，放置//$start、//$end

createProductFiles.js

该js的功能需做到如下两点：

• 根据占位符//$start、//$end，删除指定的本地测试代码
• 需再次新增占位符/* DEV_CODE */，供本地测试代码替换使用

完整代码如下所示：

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');
    if (startIndex === -1) return;
    const endIndex = source.indexOf('//$end') + 6;

    const newSource = JSON.parse(source.slice(0, startIndex) + '/* DEV_CODE */' + 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();

执行完npm run jiao-build之后，效果如下图所示：

可以看到，本地测试代码已删除

再次执行npm run jiao-dev，效果如下图所示：

正如前面提到过，执行完npm run jiao-dev之后，若修改了测试模板数据，需先执行npm run jiao-build，再执行npm run jiao-dev才会生效。

桥的麻豆（一不小心飚了句小...日本的语句），我在想什么，为何要这么麻烦，完全能在npm run jiao-dev一次性搞定嘛

解决npm run jiao-dev只能执行一次的问题

在第一次注入本地测试代码后，通过判断是否有//$start, //$end，或/* DEV_CODE */占位符，来执行不同的代码功能，完整代码如下所示：

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

const tempJs = `//$start
        setTimeout(() => {
            this.info = {
                "mc": "test"
            }
        })
//$end`
function insertLocaleCodes(targetPath, filename) {
    const oldString = JSON.stringify(fs.readFileSync(path.join(targetPath, filename), 'utf-8'))
    const startIndex = oldString.indexOf('//$start');
    const endIndex = oldString.indexOf('//$end') + 6;
    const devCodeIndex = oldString.indexOf('/* DEV_CODE */');
    function replaceCodes() {
        let template = fs.readFileSync(path.join(targetPath, filename), 'utf-8')
        const newSource = template.replace('/* DEV_CODE */', tempJs)

        fs.writeFileSync(path.join(targetPath, filename), newSource);
    }
    if (startIndex > -1 && endIndex > startIndex) {
        const newString = oldString.slice(0, startIndex) + '/* DEV_CODE */' + oldString.slice(endIndex)
        fs.outputFileSync(path.join(targetPath, filename), JSON.parse(newString), 'utf8');
        replaceCodes();
    } else if (devCodeIndex > -1) {
        replaceCodes();
    }

}
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');
}

createDevFiles();

相信众位掘友已经看出来，我做了一件什么蠢事了：若有//$start, //$end占位符，则再执行插入占位符/* DEV_CODE */，最后根据该占位符，替换成本地测试代码；若已经有占位符/* DEV_CODE */，则直接替换成本地测试代码

尾声

在前一篇文章里，掘友coderEDC提到的webpack loader方式挺不错，另外babel的方式，我还没有去尝试，如果有掘友已经试出来了，或者有更优的解决方式，欢迎在评论区留言

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