Keep-loader 用于在不同的打包环境下需要生成不同的代码的场景，就像C/C++中的宏特性一样。提供了一种在源码中控制打包阶段生成不同代码的能力。
English document：https://github.com/wendux/keep-loader/blob/master/readme-en.md
Chinese document：https://github.com/wendux/keep-loader/blob/master/readme.md
使用
-
安装 keep-loader
npm install keep-loader --save-dev -
修改webpack配置文件
module: { ... rules: [ ... { test: /\.js$/, use: [ { loader: 'keep-loader', options:{ keep:process.env.NODE_ENV === 'production'?"prod":"dev" } }, {loader: 'babel-loader'} ], include: [resolve('src'), resolve('test')] }, ... ] ... }
注意：打包的时候，keep-loader的keep参数的值代表当前打包环境。keep-loader会根据这个环境参数决定打包过程保留哪些代码。
现在，你在代码里可以直接使用 KEEP 函数 , 例如:
KEEP("dev",e=>{
//此部分代码只会在dev环境中保留
console.log("我将会在dev构建过程中保留,其它环境构建过程中被移除")
env="production"
})
KEEP("prod",e=>{
//此部分代码只会在prod环境中保留
console.log("我将会在prod构建过程中输出,其它环境构建过程中被移除")
env="production"
})
console.log(env)
//在dev环境中输出 "development" , 在prod环境中输出"production" .
KEEP(env,callback)
此函数在keep-loader中动态定义，你不必手动定义。功能：简单来说，就是指定在什么环境下保留代码。
- env : 要保留代码的环境，值必须和webpack配置中keep-loader的options的keep值相匹配。另外，env必须是一个字符串直接量，而不能是变量！因为，keep-loader实在构建过程中处理js源码，而不是在执行过程中。
- callback: 要保留的源码回调； 保留的回调会就地立即执行。
示例
1.比如我们在开发环境时静态资源用我们本地的，而线上环境是直接引用cdn，那么我们可以写一个获取基地址的函数：
function getAssetBaseUrl(){
var baseUrl="http://localhost/static"
KEEP("prod",()=>{
//此部分代码只会在prod环境中保留
baseUrl="http://cdn.xxx.com/static"
})
return baseUrl;
}
- 比如我们要在测试环境开启日志，而在生产环境关闭日志，那么我们可以写一个log函数：
function log(){
var arg=arguments;
KEEP("dev",()=>{
console.log.apply(console,arg)
})
}
- 比如我们允许在测试环境中弹出alert，但在其他环境禁止弹出alert。
var _alert=alert;
window.alert=function(msg){
KEEP("dev",()=>{
//此部分代码只会在dev环境中保留
_alert(msg)
})
}
逻辑运算符支持
//非dev环境下保留
KEEP("!dev",()=>{...})
//在dev和pre环境中保留
KEEP("dev||pre",()=>{...})
//除过dev和pre环境，其余环境保留
KEEP("!(dev||pre)",()=>{...})
//只要不是prod环境，则保留
KEEP("!prod",()=>{...})
工具函数
为了方便使用，您可以直接使用工具函数来处理一段源码
var keep=require('keep-loader/helper')
source=keep(source,env)
keep(source, env)
source为源代码字符串，env为打包环境，返回处理过的源码。
最后
欢迎Star， keep-loader github地址
