keep-loader for webpack

wendux發表於2017-09-26
Web

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

相關文章