likes
comments
collection

不想将部分代码打包到生产环境,怎么办?-----进阶突击篇

作者站长头像
站长
· 阅读数 14

前言

前一篇文章里,我提到过,很不愿意采用字符串拼接本地测试代码的方式,经过这两天的思索,找到一个比较好的替代方式,即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的方式,我还没有去尝试,如果有掘友已经试出来了,或者有更优的解决方式,欢迎在评论区留言

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