的WebPack：如何變量轉換上構建

關於使用的Vue（VUE裝載機） + 的WebPack和Chromatism的WebPack：如何變量轉換上構建

實施例：（上開發/源）

let textColor = chromatism.contrastRatio('#ffea00').cssrgb // => rgb(0,0,0)

是否有可能告訴Webpack將轉換爲rgb(0,0,0)上內部版本？

於是就內部版本應轉換是這樣的：（爲性能）藝術優化的

let textColor = 'rgb(0,0,0)'

來源

2017-06-26 l2aelba

我不相信有人寫過AOT插件來處理這個問題。你可能必須自己進行一個自定義的構建步驟，或者寫一個這樣做的插件 –

這個調用AOT的權利？ @JoeyCiechanowicz – l2aelba

由於以前的答案和意見已經提到，有沒有現成的AOT編譯器來處理這種情況（我的意思是，這是一個非常特殊的情況下，沒有通用工具可以處理它），沒有任何東西阻止你推出自己的加載器/插件來處理這個任務！
您可以使用自定義Webpack Loader和Node's VM Module在運行時執行代碼，獲取其輸出並將其替換爲源文件中的函數調用。
這種想法的實現示例可以像下面的代碼片段：

// file: chromatismOptimizer.js 

// node's vm module https://nodejs.org/api/vm.html 
const vm = require('vm') 

const chromatism = require('chromatism') 

// a basic and largley incomplete regex to extract lines where chromatism is called 
let regex = /^(.*)(chromatism\S*)(.*)$/ 

// create a Sandbox 
//https://nodejs.org/api/vm.html#vm_what_does_it_mean_to_contextify_an_object 
// this is roughly equivalent to the global the context the script will execute in 
let sandbox = { 
    chromatism: chromatism 
} 

// now create an execution context for the script 
let context = new vm.createContext(sandbox) 

// export a webpack sync loader function 
module.exports = function chromatismOptimizer(source){ 
    let compiled = source.split('\n').reduce((agg, line) => { 
    let parsed = line.replace(regex, (ig, x, source, z) => { 
     // parse and execute the script inside the context 
     // return value is the result of execution 
     // https://nodejs.org/api/vm.html#vm_script_runincontext_contextifiedsandbox_options 
     let res = (new (vm.Script)(source)).runInContext(context) 
     return `${x}'${res}'${z? z : ''}` 
    }) 
    agg.push(parsed) 
    return agg; 
    }, []).join('\n'); 

    return compiled; 
}

然後在你的production.webpack.js（或somefile類似）從this issue採取：

// Webpack config 
resolveLoader: { 
    alias: { 
    'chromatism-optimizer': path.join(__dirname, './scripts/chromatism-optimizer'), 
    }, 
} 
// In module.rules 
{ 
    test: /\.js$/, 
    use: ['chromatism-optimizer'], 
}

注意：這只是一個參考實現，大部分不完整。這裏使用的正則表達式非常基本，可能不包含許多其他用例，因此請確保更新正則表達式。此外，這整個東西可以使用webpack插件實現（這只是我沒有足夠的知識來創建一個）。要了解如何創建自定義插件，請點擊快速入門refer to this wiki。

基本思路很簡單。

首先創建一個沙箱環境，
let sandbox = { chromatism:chromatism, ...}
然後創建一個執行環境，
let context = new vm.createContext(sandbox)
然後對於每個有效源，在上下文中執行的源語句並獲得結果。
let result = (new (vm.Source)(source)).runInContext(context)
然後也許用結果替換原始的源語句。

來源

2017-08-30 10:49:10

感謝您提供一篇優秀的文章答案！我還沒有測試過。但似乎這是正確的做法。歡呼！ – l2aelba

國家不能處理任意表達式。在這種情況下，最可靠的解決方案就是像這樣在代碼中使用硬代碼。

let textColor = process.env.NODE_ENV === 'production' ? 'rgb(0,0,0)' : chromatism.contrastRatio('#ffea00').cssrgb;

一些未來的優化器可以處理像這樣的情況。 prepack將在編譯時評估代碼並輸出計算值。但是，它通常不被視爲生產準備就緒。

來源

2017-08-29 08:48:12

+1感謝**準備**參考。但是你的榜樣並不是我想要的遺憾。如果你的代碼包含非常量變量，那麼我不能設置其他的速記 – l2aelba

。我不知道預先包裝或任何優化器是否會有所幫助。 –

非常感謝，我會看看這個。 – l2aelba

嘗試使用call-back加載程序來處理所有的JavaScript。定義一個回調函數對這種特殊情況下，甚至更多的東西一般這樣的： evalDuringCompile: function(code) { return JSON.stringify(eval(code)); }

來源

2017-08-30 04:28:58

的WebPack：如何變量轉換上構建

回答

相關問題