@liuyingbo/diff-loader

diff-loader for webpack

描述

diff-loader用于在不同环境生成不同的代码的场景，就像C/C++中的宏特性一样，同时也支持console等打印信息打包后的屏蔽！

1、环境变量的区分使用

1. 安装 diff-loader

   npm install @liuyingbo/diff-loader --save-dev 或
   yarn add @liuyingbo/diff-loader -D

2. 修改webpack配置文件

   module: {
    ...
       rules: [
       ...
         {
           test: /\.js$/,
           use: [
             {
               loader: 'diff-loader',
               options:{
                 env: process.env.NODE_ENV === 'production'?"prod":"dev", // 用于区分环境
               }
             },
             {loader: 'babel-loader'}
           ],
           include: [resolve('src'), resolve('test')]
         },
         ...
         ]
       ...  
    }

现在，你在代码里可以直接使用 DIFF 函数 , 例如:

DIFF("app",e=>{
  console.log("这是app的环境才会被打包")
})
DIFF("browser",e=>{
  console.log("这是浏览器环境才会被打包进来")
})

DIFF(env,callback)

此函数在diff-loader中动态定义，你不必手动定义。

• env : 要保留代码的环境，值必须和webpack配置中diff-loader的options的env值相匹配。另外，env必须是一个字符串直接量，而不能是变量！因为，diff-loader实在构建过程中处理js源码，而不是在执行过程中。
• callback: 要保留的源码回调； 保留的回调会就地立即执行。

示例

1.比如我们在开发环境时静态资源用我们本地的，而线上环境是直接引用cdn，那么我们可以写一个获取基地址的函数：

function getAssetBaseUrl(){
  var baseUrl="http://localhost/static"
  DIFF("prod",()=>{
    baseUrl="http://cdn.xxx.com/static"
  })
  return baseUrl;
}

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

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