Webpack Plugin For Jscc

简介

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 //*/

TODO

• [ ] 单测编写
• [ ] 支持合并配置，而不是覆盖配置