keep-loader for webpack

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

English document：github.com/wendux/keep…

Chinese document：github.com/wendux/keep…

使用

1. 安装 keep-loader

   npm install keep-loader --save-dev复制代码

2. 修改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;
}复制代码

1. 好比咱们要在测试环境开启日志，而在生产环境关闭日志，那么咱们能够写一个log函数：

function log(){
   var arg=arguments;
   KEEP("dev",()=>{
    console.log.apply(console,arg)
  })
}复制代码

1. 好比咱们容许在测试环境中弹出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地址