वेबपैक के साथ वैश्विक चर को परिभाषित करें

Question

क्या इस तरह से कुछ परिणाम के लिए वेबपैक के साथ एक वैश्विक चर को परिभाषित करना संभव है:

var myvar = {};

मेरे द्वारा देखे गए सभी उदाहरण बाहरी फ़ाइल का उपयोग कर रहे थे require("imports?$=jquery!./file.js")

Answer 1

ग्लोबल्स से संपर्क करने के कई तरीके हैं:

1) एक मॉड्यूल में अपने चर रखें।

वेबपैक केवल एक बार मॉड्यूल का मूल्यांकन करता है, इसलिए आपका उदाहरण वैश्विक रहता है और मॉड्यूल से मॉड्यूल के माध्यम से परिवर्तन करता है। इसलिए यदि आप कुछ ऐसा बनाते हैं globals.jsऔर अपने सभी ग्लोबल्स का ऑब्जेक्ट निर्यात करते हैं तो आप import './globals'इन ग्लोबल्स को पढ़ और लिख सकते हैं। आप एक मॉड्यूल में आयात कर सकते हैं, एक फ़ंक्शन से ऑब्जेक्ट में परिवर्तन कर सकते हैं और दूसरे मॉड्यूल में आयात कर सकते हैं और एक फ़ंक्शन में उन परिवर्तनों को पढ़ सकते हैं। यह भी याद रखें कि आदेश होता है। वेबपैक सबसे पहले सभी आयातों को ले जाएगा और उन्हें आपके क्रम में शुरू करने के लिए लोड करेगा entry.js। फिर इस पर अमल करेंगे entry.js। इसलिए जहां आप ग्लोबल्स को पढ़ते / लिखते हैं, वह महत्वपूर्ण है। क्या यह किसी मॉड्यूल के रूट स्कोप से है या बाद में किसी फ़ंक्शन में है?

नोट : यदि आप चाहते हैं कि उदाहरण newहर बार हो, तो ES6 वर्ग का उपयोग करें । परंपरागत रूप से जेएस में आप कक्षाओं को कैपिटलाइज़ करेंगे (जैसा कि वस्तुओं के निचले हिस्से के विपरीत) जैसे
import FooBar from './foo-bar' // <-- Usage: myFooBar = new FooBar()

2) वेबपैक का प्रोप्लगिन

यहां बताया गया है कि आप वेबपैक के प्रोप्लुगिन का उपयोग करके कैसे कर सकते हैं (जो प्रत्येक मॉड्यूल में एक चर के रूप में एक मॉड्यूल उपलब्ध कराता है और केवल उन मॉड्यूल जहां आप वास्तव में इसका उपयोग करते हैं)। यह तब उपयोगी होता है जब आप import Bar from 'foo'बार-बार टाइपिंग नहीं करना चाहते हैं । या आप यहां jQuery या लॉश जैसे पैकेज में ग्लोबल के रूप में ला सकते हैं (हालांकि आप वेबपैक के एक्सटर्नल पर एक नज़र डाल सकते हैं )।

चरण 1) कोई भी मॉड्यूल बनाएं। उदाहरण के लिए, उपयोगिताओं का एक वैश्विक सेट उपयोगी होगा:

utils.js

export function sayHello () {
  console.log('hello')
}

चरण 2) उपनाम को जोड़ दें और ProvPlugin में जोड़ें:

webpack.config.js

var webpack = require("webpack");
var path = require("path");

// ...

module.exports = {

  // ...

  resolve: {
    extensions: ['', '.js'],
    alias: {
      'utils': path.resolve(__dirname, './utils')  // <-- When you build or restart dev-server, you'll get an error if the path to your utils.js file is incorrect.
    }
  },

  plugins: [

    // ...

    new webpack.ProvidePlugin({
      'utils': 'utils'
    })
  ]  

}

अब बस utils.sayHello()किसी भी js फ़ाइल में कॉल करें और यह काम करना चाहिए। सुनिश्चित करें कि आप अपने देव-सर्वर को पुनः आरंभ करते हैं यदि आप वेबपैक के साथ उसका उपयोग कर रहे हैं।

नोट: अपने लिंटर को ग्लोबल के बारे में बताना न भूलें, इसलिए यह शिकायत नहीं करेगा। उदाहरण के लिए, यहां ESLint के लिए मेरा जवाब देखें ।

3) वेबपैक के डिफाइनप्लगिन का उपयोग करें

यदि आप अपने ग्लोबल्स के लिए स्ट्रिंग मान के साथ कास्ट का उपयोग करना चाहते हैं, तो आप इस प्लगइन को अपनी वेबपैक प्लगइन्स की सूची में जोड़ सकते हैं:

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify("5fa3b9"),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: "1+1",
  "typeof window": JSON.stringify("object")
})

इसका उपयोग करें जैसे:

console.log("Running App version " + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require("html5shiv");

4) वैश्विक विंडो ऑब्जेक्ट (या नोड्स ग्लोबल) का उपयोग करें

window.foo = 'bar'  // For SPA's, browser environment.
global.foo = 'bar'  // Webpack will automatically convert this to window if your project is targeted for web (default), read more here: https://webpack.js.org/configuration/node/

आप इसे आमतौर पर पॉलीफ़िल के लिए उपयोग करते देखेंगे, उदाहरण के लिए: window.Promise = Bluebird

5) dotenv जैसे पैकेज का उपयोग करें

(सर्वर साइड प्रोजेक्ट्स के लिए) dotenv पैकेज एक स्थानीय कॉन्फ़िगरेशन फ़ाइल लेगा (जिसे आप अपनी .gitignore में जोड़ सकते हैं यदि कोई कुंजी / क्रेडेंशियल्स हैं) और नोड के प्रोसेस के लिए अपने कॉन्फ़िगरेशन चर जोड़ता है ।env ऑब्जेक्ट।

// As early as possible in your application, require and configure dotenv.    
require('dotenv').config()

.envअपने प्रोजेक्ट के रूट डायरेक्टरी में एक फाइल बनाएं । के रूप में नई लाइनों पर पर्यावरण-विशिष्ट चर जोड़ें NAME=VALUE। उदाहरण के लिए:

DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3

बस।

process.envअब आपके पास आपकी .envफ़ाइल में परिभाषित की गई कुंजियाँ और मूल्य हैं ।

var db = require('db')
db.connect({
  host: process.env.DB_HOST,
  username: process.env.DB_USER,
  password: process.env.DB_PASS
})

टिप्पणियाँ:

वेबपैक के एक्सटर्नल के संबंध में , इसका उपयोग करें यदि आप कुछ मॉड्यूल को अपने निर्मित बंडल में शामिल करने से बाहर करना चाहते हैं। Webpack मॉड्यूल को विश्व स्तर पर उपलब्ध कराएगा लेकिन इसे आपके बंडल में नहीं डालेगा। यह jQuery जैसे बड़े पुस्तकालयों के लिए आसान है (क्योंकि ट्री पैकेज में बाहरी पैकेज हिलाना वेबपैक में काम नहीं करता है ) जहां आपके पास ये पृष्ठ पहले से ही अलग स्क्रिप्ट टैग (शायद सीडीएन से) में लोड किए गए हैं।

Comments

+1। मैं एक निर्माण उपकरण के रूप में वेबपैक का लाभ उठाने के लिए एक ऐप को फिर से संरचित कर रहा हूं और यह शुरू में मेरे लिए काम नहीं करता था क्योंकि मैंने utilsलक्ष्य फ़ाइल में अपने स्वयं के नामस्थान का कोई संदर्भ शामिल नहीं किया था - शुरू में मैंने केवल ब्राउज़र में एक ब्रेकपॉइंट डाला था स्रोत विंडो और मैं utilsपरिभाषित क्यों नहीं था पर puzzling रखा । अंत में मुझे पता चला कि वेबपैक (बल्कि स्मार्टली) में केवल एक मॉड्यूल शामिल है अगर इसके नाम स्थान को कम से कम एक बार संदर्भित किया जाता है। इसलिए, एक बार जब मैंने लक्ष्य फ़ाइल की उपयोगिता कार्यों में से एक को प्रस्तुत किया utils, तो मॉड्यूल शामिल था ।

— nb1987

हाँ, केवल जहाँ आप इसका उपयोग करते हैं, क्या यह इसे उपलब्ध करता है। मैंने उसे उत्तर की पहली पंक्ति में रखा, लेकिन मैंने थोड़ा सा समायोजन किया ताकि शायद वह बेहतर तरीके से पढ़ सके। +1 के लिए धन्यवाद!

— प्राग्रामर

ध्यान दें कि ProvPlugin वास्तव में मॉड्यूल लोड करता है और यदि आपको बस एक चर की आवश्यकता है, तो यह उस तरह से काम नहीं करता है। externalsयदि आपको वैश्विक वैरिएबल बनाने की आवश्यकता है, तो इसके बजाय उपयोग करें । उदाहरण: externals: { 'webpackVariables': `{ serverUrl: '${ env.server }', cordovaBuild: '${ env.cordova }', }`, }, इसके बाद इसका उपयोग करेंconst webpackVariables = require('webpackVariables');

— ब्रायन हाक

और क्या आप जानते हैं कि मैं टाइपस्क्रिप्ट के साथ इस दृष्टिकोण का उपयोग कैसे कर सकता हूं? वहाँ अगर आप एक अघोषित चर का उपयोग करते हैं तो यह एक त्रुटि फेंकता है ...

— knaos

@prograhammer वास्तव में, मैं पहले से ही समाधान मिल गया। आपके एप्लिकेशन की जड़ में, आमतौर पर जहां आपका tsconfig.json है, आपको Global.d.ts नाम की एक परिभाषा फ़ाइल जोड़ने की आवश्यकता है । इसमें आप इस तरह के वैश्विक चर घोषित कर सकते हैं: declare const isProduction: bool;संदर्भ के लिए, इस प्रकार की

— outcriptlang.org/docs/handbook/declaration-files/templates/…

Answer 2

मैं एक ही सवाल पूछने वाला था। थोड़ा आगे खोज और webpack के प्रलेखन का हिस्सा decyphering के बाद मुझे लगता है कि क्या आप चाहते हैं है output.libraryऔर output.libraryTargetमें webpack.config.jsफ़ाइल।

उदाहरण के लिए:

जे एस / index.js:

var foo = 3;
var bar = true;

webpack.config.js

module.exports = {
   ...
   entry: './js/index.js',
   output: {
      path: './www/js/',
      filename: 'index.js',
      library: 'myLibrary',
      libraryTarget: 'var'
   ...
}

अब अगर आप www/js/index.jshtml स्क्रिप्ट टैग में जेनरेट की गई फाइल को लिंक करते हैं तो आप myLibrary.fooअपनी अन्य स्क्रिप्ट्स में कहीं से भी एक्सेस कर सकते हैं।

Comments

मुझे लगता है कि यह गायब export { foo }है index.js?

— लंदनऐपडेव

myLibrary मेरे मामले में किसी अन्य फ़ाइल में अपरिभाषित देता है। क्या आप कृपया मेरी मदद कर सकते हैं

— RVCoder

Answer 3

DefinePlugin का उपयोग करें ।

डेफिनप्लगिन आपको वैश्विक स्थिरांक बनाने की अनुमति देता है जिसे संकलन समय पर कॉन्फ़िगर किया जा सकता है।

new webpack.DefinePlugin(definitions)

उदाहरण:

plugins: [
  new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true)
  })
  //...
]

उपयोग:

console.log(`Environment is in production: ${PRODUCTION}`);

Answer 4

आप डिफाइन का उपयोग कर सकते हैं window.myvar = {}। जब आप इसका उपयोग करना चाहते हैं, तो आप जैसे चाहें उपयोग कर सकते हैंwindow.myvar = 1

Comments

यह EMCAScript 6. के साथ काम नहीं करता है। त्रुटि के साथ var window.CKEDITOR_BASEPATH = {};त्रुटि उत्पन्न करता है "अनपेक्षित टोकन" के बादwindow.

— Routhinator

माफ़ करना। मैंने अभी अपना उत्तर अपडेट किया है। आपको varकीवर्ड करना चाहिए । window.CKEDITOR_BASEPATH = {};

— अन्ह गुयेन

यह काम करता है, दुर्भाग्य से यह समस्या है कि मुझे इसकी आवश्यकता है कि मुझे CKEditor से पहले बंडल में लोड किया जाए, हालांकि वेबपैक इसे किसी भी मामले के बाद डालने पर जोर देता है जहां मैं इसे अपने आयात / js में रखता हूं। : /

— राउटरिनेटर

Answer 5

मैंने वैश्विक चर को स्थिर गुणों के रूप में उन वर्गों पर सेट करके इस मुद्दे को हल किया, जिनके लिए वे सबसे अधिक प्रासंगिक हैं। ES5 में यह इस तरह दिखता है:

var Foo = function(){...};
Foo.globalVar = {};