diff-loader for webpack
描述
diff-loader用于在不同环境生成不同的代码的场景,就像C/C++中的宏特性一样,同时也支持console等打印信息打包后的屏蔽!
1、环境变量的区分使用
-
安装 diff-loader
npm install @liuyingbo/diff-loader --save-dev 或 yarn add @liuyingbo/diff-loader -D
-
修改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;
}
- 比如我们要在测试环境开启日志,而在生产环境关闭日志,那么我们可以写一个log函数:
function log(){
var arg=arguments;
DIFF("dev",()=>{
console.log.apply(console,arg)
})
}