ওয়েবপ্যাক সহ গ্লোবাল ভেরিয়েবল সংজ্ঞা দিন

138

ওয়েবপ্যাকের সাহায্যে কোনও বৈশ্বিক চলক সংজ্ঞায়িত করা কি এই জাতীয় ফলাফলের জন্য সম্ভব:

var myvar = {};

আমি যে উদাহরণগুলি দেখেছি তার সবগুলিই বাহ্যিক ফাইল ব্যবহার করছিল require("imports?$=jquery!./file.js")

— Teneff
সূত্র

272

গ্লোবালগুলির কাছে যাওয়ার বেশ কয়েকটি উপায় রয়েছে:

1) আপনার ভেরিয়েবলগুলি একটি মডিউলে রাখুন।

ওয়েবপ্যাক কেবল একবার মডিউলগুলি মূল্যায়ন করে, তাই আপনার উদাহরণটি বিশ্বব্যাপী থেকে যায় এবং মডিউল থেকে মডিউল পর্যন্ত পরিবর্তন বহন করে। সুতরাং আপনি যদি এমন কিছু তৈরি করেন globals.jsএবং আপনার সমস্ত গ্লোবালগুলির একটি পণ্য রফতানি করেন তবে আপনি import './globals'এই গ্লোবালগুলিতে পড়তে এবং লিখতে পারেন। আপনি একটি মডিউলে আমদানি করতে পারেন, কোনও ফাংশন থেকে অবজেক্টে পরিবর্তন করতে পারেন এবং অন্য মডিউলে আমদানি করতে পারেন এবং কোনও ফাংশনে এই পরিবর্তনগুলি পড়তে পারেন। অর্ডার জিনিসগুলি ঘটবে তা মনে রাখবেন। ওয়েবপ্যাক প্রথমে সমস্ত আমদানি গ্রহণ করবে এবং আপনার শুরুতে সেগুলি লোড করবে entry.js। তারপরে এটি কার্যকর করা হবে entry.js। সুতরাং আপনি কোথায় বিশ্বব্যাপী লেখেন / লিখবেন তা গুরুত্বপূর্ণ। এটি কোনও মডিউলের মূল স্কোপ থেকে বা কোনও ফাংশনে পরে বলা হয়?

দ্রষ্টব্য : আপনি যদি newপ্রতি বারের মতো উদাহরণটি চান তবে একটি ES6 ক্লাস ব্যবহার করুন । Sতিহ্যগতভাবে জেএসে আপনি ক্লাসগুলি (বস্তুর জন্য ছোট হাতের বিপরীতে) পছন্দ করুন
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) মডিউলটির নাম দিন এবং প্রোভাইডপ্লাগিন যুক্ত করুন:

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()কোনও জেএস ফাইলে কল করুন এবং এটি কাজ করা উচিত। আপনি যদি ওয়েবপ্যাকটি ব্যবহার করে থাকেন তবে আপনার ডিভ সার্ভারটি পুনরায় চালু করার বিষয়টি নিশ্চিত করুন।

দ্রষ্টব্য: গ্লোবাল সম্পর্কে আপনার লাইনটারটি বলতে ভুলবেন না, তাই এটি অভিযোগ করবে না। উদাহরণস্বরূপ, ইএসলিন্টের জন্য আমার উত্তরটি এখানে দেখুন ।

3) ওয়েবপ্যাকের DefinePlugin ব্যবহার করুন

যদি আপনি কেবল আপনার গ্লোবালগুলির জন্য স্ট্রিং মানগুলির সাথে কনস্ট ব্যবহার করতে চান তবে আপনি এই প্লাগইনটি আপনার ওয়েবপ্যাক প্লাগইনগুলির তালিকায় যুক্ত করতে পারেন:

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) ডোটেনভের মতো প্যাকেজ ব্যবহার করুন

(সার্ভার সাইড প্রজেক্টের জন্য) ডটেনভ প্যাকেজটি একটি স্থানীয় কনফিগারেশন ফাইল নেবে (যা যদি আপনার কী .Gitignore এ যুক্ত করতে পারে তবে কোনও কী / শংসাপত্র রয়েছে) এবং নোডের প্রক্রিয়া.এনভি অবজেক্টে আপনার কনফিগারেশন ভেরিয়েবল যুক্ত করবে ।

// 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
})

ওয়েবপ্যাকের বিষয়ে এক্সটার্নাল সম্পর্কিত , আপনি যদি নিজের বিল্ড বান্ডেলে অন্তর্ভুক্ত হতে কিছু মডিউল বাদ দিতে চান তবে এটি ব্যবহার করুন। ওয়েবপ্যাকটি বিশ্বব্যাপী মডিউলটি তৈরি করবে তবে এটি আপনার বান্ডেলে রাখবে না। এটি jQuery এর মতো বড় লাইব্রেরিগুলির জন্য কার্যকর (কারণ গাছ কাঁপানো বাহ্যিক প্যাকেজগুলি ওয়েবপ্যাকে কাজ করে না ) যেখানে আপনি ইতিমধ্যে পৃথক স্ক্রিপ্ট ট্যাগগুলিতে (সম্ভবত কোনও সিডিএন থেকে) আপনার পৃষ্ঠাতে লোড করেছেন।

— prograhammer
সূত্র

3

+1 টি। আমি একটি অ্যাপ্লিকেশনটিকে একটি বিল্ড টুল হিসাবে ওয়েবপ্যাকটি উপার্জনের জন্য পুনর্গঠন করছি এবং এটি প্রাথমিকভাবে আমার পক্ষে কাজ করেনি কারণ আমি utilsলক্ষ্য ফাইলটিতে নিজের নামের জায়গার কোনও রেফারেন্স অন্তর্ভুক্ত করি নি - প্রাথমিকভাবে আমি ব্রাউজারের একটি ব্রেকপয়েন্ট রেখেছিলাম উত্স উইন্ডো এবং আমি কেন utilsসংজ্ঞায়িত করা হয়নি তা নিয়ে হতবাক হয়েছি । অবশেষে আমি আবিষ্কার করেছি যে ওয়েবপ্যাকটি (বরং স্মার্টলি) কেবলমাত্র একটি মডিউল অন্তর্ভুক্ত করে যদি এর নাম স্থানটি অন্তত একবার উল্লেখ করা হয়। অতএব, আমি একবার লক্ষ্য ফাইলের ইউটিলিটি ফাংশনগুলির সাথে একটির উপস্থাপন utilsকরার পরে মডিউলটি অন্তর্ভুক্ত করা হয়েছিল ।

— nb1987

হ্যাঁ, আপনি যেখানে এটি ব্যবহার করেন কেবল এটিই এটি উপলব্ধ করে। আমি এটি উত্তরটির প্রথম লাইনে রেখেছি তবে আমি কিছুটা সামঞ্জস্য করেছি তাই সম্ভবত এটি আরও ভাল পড়তে পারে। +1 এর জন্য ধন্যবাদ!

— প্রগ্রেহামার

1

নোট করুন যে ProvidePlugin আসলে মডিউলগুলি লোড করে এবং আপনার যদি কেবল একটি ভেরিয়েবলের প্রয়োজন হয় তবে এটি সেভাবে কাজ করে না। এর externalsপরিবর্তে যদি আপনার একটি বৈশ্বিক চলক তৈরি করতে হয় তবে এটি ব্যবহার করুন। উদাহরণ:

externals: {       'webpackVariables': `{         serverUrl: '${ env.server }',         cordovaBuild: '${ env.cordova }',       }`,     },

তারপরে এটি ব্যবহার করুনconst webpackVariables = require('webpackVariables');

— ব্রায়ান হক

1

এবং আপনি কি জানেন কীভাবে আমি টাইপস্ক্রিপ্ট দিয়ে এই পদ্ধতির ব্যবহার করতে পারি? সেখানে আপনি যদি অঘোষিত পরিবর্তনশীল ব্যবহার করেন তবে এটি একটি ত্রুটি ছুড়ে ফেলে ...

— Knoos

2

@ প্রোগ্রাহারহ্যামার আসলে, আমি ইতিমধ্যে সমাধানটি খুঁজে পেয়েছি। আপনার অ্যাপ্লিকেশনটির মূলটিতে সাধারণত আপনার tsconfig.json থাকে সেখানে আপনাকে Global.d.ts নামের একটি সংজ্ঞা ফাইল যুক্ত করতে হবে । এটা আপনি গ্লোবাল ভেরিয়েবল ডিক্লেয়ার করতে পারেন, এভাবে: declare const isProduction: bool;অবগতির জন্য, এই চেক আউট typescriptlang.org/docs/handbook/declaration-files/templates/...

— knaos

45

আমি খুব একই প্রশ্ন জিজ্ঞাসা করতে চলেছিলাম। একটি বিট আরও অনুসন্ধান এবং webpack এর ডকুমেন্টেশন অংশ decyphering পর আমি মনে করি যে আপনি কি চান output.libraryএবং output.libraryTargetএ webpack.config.jsফাইল।

উদাহরণ স্বরূপ:

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.jsফাইলটিকে এইচটিএমএল স্ক্রিপ্ট ট্যাগে লিঙ্ক করেন তবে আপনি myLibrary.fooঅন্য স্ক্রিপ্টগুলির যে কোনও জায়গা থেকে অ্যাক্সেস করতে পারবেন ।

— OriolBG
সূত্র

3

আমি মনে করি এটা অনুপস্থিত export { foo }থেকে index.js?

— লন্ডনএপদেভ

মাই লাইব্রারি আমার ক্ষেত্রে অন্য একটি ফাইলে অপরিজ্ঞাত দেয়। আপনি দয়া করে আমাকে সহায়তা করতে পারেন

— আরভিকোডার

17

DefinePlugin ব্যবহার করুন ।

DefinePlugin আপনাকে বৈশ্বিক ধ্রুবক তৈরি করতে দেয় যা সংকলন সময়ে কনফিগার করা যায়।

new webpack.DefinePlugin(definitions)

উদাহরণ:

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

ব্যবহার:

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

— রিকি
সূত্র

14

আপনি সংজ্ঞায়িত ব্যবহার করতে পারেন window.myvar = {}। আপনি যখন এটি ব্যবহার করতে চান, আপনি পছন্দ মতো ব্যবহার করতে পারেনwindow.myvar = 1

— আনহ এনগুইন
সূত্র

এটি EMCAScript 6 এর সাথে কাজ করে না var window.CKEDITOR_BASEPATH = {};Error ত্রুটির সাথে ত্রুটিটি উত্পাদন করে "অপ্রত্যাশিত টোকেন" পরেwindow.

— রুথিনেটর

1

দুঃখিত। আমি সবেমাত্র আমার উত্তর আপডেট করেছি। আপনার varকিওয়ার্ড করা উচিত window.CKEDITOR_BASEPATH = {};

— আনহ এনগুইন

এটি কাজ করে, দুর্ভাগ্যক্রমে আমি যে সমস্যাটি নিয়ে আসছি তা হ'ল সি কেইডিটারের আগে আমার এটি বান্ডলে লোড করা দরকার, তবে ওয়েবপ্যাকটি যেখানে আমি আমার আমদানি / জেএসে রাখি না কেন এটি রাখার জন্য জোর দিয়েছিল। : /

— রাউথিনেটর

2

আমি ক্লাসে স্ট্যাটিক বৈশিষ্ট্য হিসাবে তারা সবচেয়ে প্রাসঙ্গিক সেগুলি বিশ্বব্যাপী ভেরিয়েবলগুলি সেট করে এই সমস্যাটি সমাধান করেছি। ES5 এ এটির মতো দেখাচ্ছে:

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

— pasx
সূত্র