Xkeep-loader NPM

keep-loader for webpack

描述

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 函数 , 例如:

var env=""
KEEP("dev",e=>{
  console.log("我将会在dev构建过程中保留,其它环境构建过程中被移除")
  env="production"
})
KEEP("prod",e=>{
  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",()=>{
    baseUrl="http://cdn.xxx.com/static"
  })
  return baseUrl;
}

比如我们要在测试环境开启日志，而在生产环境关闭日志，那么我们可以写一个log函数：

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

最后

欢迎Star

3 years ago

3 years ago

3 years ago