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地址