Webpack: कैसे निर्माण

Question

पर चर कन्वर्ट करने के लिए Vue(Vue-लोडर) + Webpack और Chromatism

उदाहरण का उपयोग कर के बारे में: (देव पर/स्रोत)

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

वेबपैक सेको परिवर्तित करने के लिए वेबपैक को बताना संभव है पर का निर्माण करें?

तो निर्माण संस्करण की तरह कुछ परिवर्तित किया जाना चाहिए: कला अनुकूलक की

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

Answer 1

पिछले जवाब और टिप्पणियों जैसा कि पहले ही उल्लेख किया है आसानी से उपलब्ध 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'], 
} 

इस विचार का एक नमूना कार्यान्वयन निम्नलिखित स्निपेट की तरह लग सकता है नोट: यह सिर्फ एक संदर्भ कार्यान्वयन है और काफी हद तक अपूर्ण है। यहां इस्तेमाल किया गया रेगेक्स काफी बुनियादी है और इसमें कई अन्य उपयोग मामलों को शामिल नहीं किया जा सकता है, इसलिए सुनिश्चित करें कि आप रेगेक्स को अपडेट करें। साथ ही यह पूरी चीजें वेबपैक प्लगइन्स का उपयोग करके कार्यान्वित की जा सकती हैं (यह सिर्फ इतना है कि मेरे पास एक बनाने का पर्याप्त ज्ञान नहीं है)। कस्टम प्लगइन बनाने का तरीका जानने के लिए त्वरित स्टार्टर refer to this wiki के लिए।

मूल विचार सरल है।

1. पहले एक sandboxed वातावरण बनाने,
   let sandbox = { chromatism:chromatism, ...}

2. फिर एक निष्पादन संदर्भ बनाने के लिए,
   let context = new vm.createContext(sandbox)

3. फिर प्रत्येक वैध स्रोत के लिए, स्रोत बयान के संदर्भ में निष्पादित और मिल परिणाम।
   let result = (new (vm.Source)(source)).runInContext(context)

4. तो शायद परिणाम के साथ मूल स्रोत बयान बदल दें।

Answer 2

राज्य (प्रदर्शन के लिए) मनमाने ढंग से अभिव्यक्ति को संभाल नहीं कर सकते हैं। इस मामले में, सबसे विश्वसनीय समाधान आपके कोड में इस तरह के हार्ड कोड स्थिर है।

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

कुछ भविष्यवादी अनुकूलक इस तरह की स्थिति को संभालता है। prepack संकलन समय और आउटपुट गणना मूल्यों पर कोड का मूल्यांकन करेगा। हालांकि, इसे आमतौर पर उत्पादन तैयार नहीं माना जाता है।

Answer 3

अपनी सभी जावास्क्रिप्ट को संसाधित करने के लिए call-back लोडर का उपयोग करने का प्रयास करें। इस विशेष मामले या यहां तक ​​कि अधिक सामान्य की तरह कुछ के लिए एक कॉलबैक फ़ंक्शन परिभाषित करें: evalDuringCompile: function(code) { return JSON.stringify(eval(code)); }