webpack-plugin-jscc是支持代码级的条件编译能力一个插件
yarn add webpack-plugin-jscc
import JsccPlugin from 'webpack-plugin-jscc'
JsccPlugin的参数说明
| 参数 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| exts | Array<string> |
需要解析的文件 | ['vue', 'js', 'ts', 'css', 'stylus', 'less', 'scss'] |
| values | Object | 注入的业务环境标识 | {_PLATFORM: 'web'} |
| excludes | Array<string> |
不做处理的文件 | [/node_modules/] |
plugins: [
new JsccPlugin({
values: {
_PLATFORM: 'web', // 匹配业务环境标识
}
})
]
更多 jscc 高级用法，可以参考 jscc 文档
js/ts:
//#if _PLATFORM==='web'
console.info('【js/ts】 in web')
//#else
console.info('【js/ts】 in other')
//#endif
vue:
<template>
<div class="view">
<!--#if _PLATFORM==='web' //-->
<HelloWorld msg="Welcome to web!"/>
<!--#else //-->
<HelloWorld msg="Welcome to other!"/>
<!--#endif //-->
</div>
</template>
css:
/*#if _PLATFORM==='web' //*/
.web {
height: 10px
}
/*#endif //*/
- 单测编写
- 支持合并配置，而不是覆盖配置