vite-code-replace
v1.0.2
Published
vite-code-replace: 替换代码文件中的代码片段或者变量
Downloads
14
Readme
vite-code-replace: 替换代码文件中的代码片段或者变量
基本使用
可以用于对文件中的变量、代码段进行替换或删减,由于替换发生在 load 文件阶段,所以能够保证最终代码产物的纯净。
import ViteCodeReplace from 'vite-code-replace'
{
plugins: [
ViteCodeReplace({
replaces: [{
file: /\/src\/router.ts$/,
source: "SOME_ROUTE",
target: "real_route"
},{
file: /\/src\/router.ts$/,
source: /\/\/\sDELET_PREFIX(.|\n)*?\/\/\sDELET_SUFFIX/,
target: ""
}]
})
]
}
参数类型定义:
interface CodeReplaceOptions {
replaces: {
file: RegExp;
source: RegExp | string;
target: string | number | boolean;
}[];
}
使用场景
- 对不同发布渠道的代码进行删减,并且防止源代码的泄漏
有的时候,我们的代码在某些渠道分发时候需要删减掉一部分逻辑,并且打包产物中不能包含这部分逻辑。
我们可以采用类似宏编译的思想,通过本插件来完成各类复杂的代码删减工作。
例如,我们可以采用添加前后注释的方式对代码进行删减:
// DELET_PREFIX
// some secret code ...
// DELET_SUFFIX
在我们顶部给出的配置例子中,some secret code ...
这部分代码可以安全地被移除,完全不会被包含在产物代码中。
- 更灵活和高效的动态路由
众所周知,import 的语法由于是静态分析是不允许使用变量的,vue 虽然提供了 defineAsyncComponent
等能力,但是实际上并没有什么黑魔法,而是将相关文件目录遍历和打包,并没有真正达到按需打包,保护源代码的目的。
借助 vite-code-replace 插件,我们可以更灵活地在构建时决定我们的路由目录。