webpack आयात केवल चर मूल्य

Question

मैं कोड है कि package.json से संस्करण मूल्य की जरूरत है संकलन कर रहा हूँ:

import {version} from '../package.json'; 
export default {version}; 

और जब मैं .js फ़ाइल है कि आउटपुट webpack देखो मैं पूरी package.json वहाँ देखो!

मैं इससे कैसे बच सकता हूं?

मेरे सेटअप है:

plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': '"production"' 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
      warnings: false 
     } 
    }), 
    new CompressionPlugin({ 
     asset: '[path].gz[query]', 
     algorithm: 'gzip', 
     test: /\.(js|css)$/, 
     threshold: 10240, 
     minRatio: 0.8 
    }), 
] 

मेरे webpack संस्करण 3.8.1

Answer 1

तरह कॉलबैक https://webpack.js.org/configuration/externals/ साथ external कॉन्फ़िगर है क्या मैं आमतौर पर करते हैं अपने कोड में DefinePlugin का लाभ लेने के

// webpack.config.js 
// getting the version 
const package = require("./package.json"); 
const version = package.version; 

plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': '"production"', 
     'process.env.VERSION': version, 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
      warnings: false 
     } 
    }), 
    new CompressionPlugin({ 
     asset: '[path].gz[query]', 
     algorithm: 'gzip', 
     test: /\.(js|css)$/, 
     threshold: 10240, 
     minRatio: 0.8 
    }), 
] 

अब है आपको बस इतना करना होगा process.env.VERSION और आप अपने पैकेज संस्करण को आउटपुट करेंगे।

आशा है कि इससे

Answer 2

आधुनिक webpack संस्करणों का समर्थन Tree shaking (https://webpack.js.org/guides/tree-shaking/) है, लेकिन यह काम करता है निर्यात निर्देशों विशेष योजना द्वारा विन्यस्त केवल तभी, स्वतंत्र नामित आयात भी शामिल है प्रत्येक इकाई के लिए। उस स्थिति में वेबपैक विश्लेषण निर्भरता ग्राफ प्रदर्शन कर सकता है और केवल आवश्यक इकाइयां शामिल कर सकता है। इसके अलावा, आयात निर्देश विनाश का समर्थन नहीं करता है - यह नामित आयात के लिए केवल वाक्यविन्यास है, इसलिए बड़ी जेएस ऑब्जेक्ट हमेशा एकात्मक शैली में आयात की जाएगी।

मान के रूप में आयात परिभाषा के अनुसार अनुपलब्ध है, क्योंकि वेबपैक केवल स्रोत कोड और शायद कस्टम संसाधन निर्भरताओं वाली फ़ाइलों के सेट के लिए बंडल करता है। ईएस 6 मॉड्यूल में वास्तविक आयात, जो आज पहले से ही अधिकांश प्लेटफार्मों पर समर्थित हैं, भी मूल्य आयात प्रदान नहीं करते हैं - इसके बजाय यह बाध्यकारी है। https://ponyfoo.com/articles/es6-modules-in-depth#bindings-not-values।

बेशक, मूल समस्या को वेबपैक replace या alias प्लगइन द्वारा हल किया जा सकता है। बस कुछ स्वतंत्र फ़ाइल में version स्टोर करें या निरंतर स्ट्रिंग करें और इसे बंडल करने के विकल्प दें। सबसे सरल समाधान

import version from 'PACKAGE_VERSION' 

और फिर उस

externals: [ 
    function(context, request, callback) { 
    if (request === 'PACKAGE_VERSION'){ 
     return callback(null, 'exports.default = ' + JSON.stringify(JSON.parse(fs.readFileSync('package.json')).version)); 
    } 
    callback(); 
    } 
],