keep-loader for webpack-白红宇

keep-loader用于在不同的打包环境下需要生成不同的代码的场景，就像C/C++中的宏特性一样。提供了一种在源码中控制打包阶段生成不同代码的能力。

English document：

Chinese document：

使用

安装 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，