इन-ब्राउज़र जावास्क्रिप्ट के लिए नोड-स्टाइल की आवश्यकता होती है?

Question 1

क्या इन-ब्राउज़र जावास्क्रिप्ट के लिए कोई लाइब्रेरी है जो नोड्स के रूप में समान लचीलापन / मॉड्यूलरिटी / उपयोग में आसानी प्रदान करती है require?

अधिक विवरण प्रदान करने के लिए: कारण requireइतना अच्छा है कि यह है:

कोड को अन्य स्थानों से गतिशील रूप से लोड करने की अनुमति देता है (जो स्टाइलिस्टिक रूप से बेहतर है, मेरी राय में, HTML में आपके सभी कोड लिंक करने की तुलना में)
यह बिल्डिंग मॉड्यूल के लिए एक सुसंगत इंटरफ़ेस प्रदान करता है
मॉड्यूल के लिए अन्य मॉड्यूल पर निर्भर करना आसान है (इसलिए मैं लिख सकता हूं, उदाहरण के लिए, एक एपीआई जिसे jQuery की आवश्यकता होती है ताकि मैं उपयोग कर सकूं jQuery.ajax()
भरी हुई जावास्क्रिप्ट को हटा दिया जाता है , जिसका अर्थ है कि मैं लोड कर सकता हूं var dsp = require("dsp.js");और मैं एक्सेस कर पाऊंगा dsp.FFT, जो मेरे स्थानीय लोगों के साथ हस्तक्षेप नहीं करेगाvar FFT

मुझे अभी तक एक पुस्तकालय नहीं मिला है जो प्रभावी रूप से ऐसा करता हो। मेरे द्वारा उपयोग किए जाने वाले वर्कआर्ड हैं:

कॉफ़ीस्क्रिप्ट-कॉनकट - यह अन्य जेएस की आवश्यकता के लिए काफी आसान है, लेकिन आपको इसे संकलित करना होगा, जिसका अर्थ है कि यह तेजी से विकास के लिए कम महान है (उदाहरण के लिए एपीआई का परीक्षण करना)
आवश्यकताएं - यह लोकप्रिय, सीधा और 1-3 है, लेकिन स्कूपिंग की कमी एक वास्तविक सौदा-ब्रेकर है (मेरा मानना है कि हेड। जेएस समान है कि इसमें स्कूपिंग की कमी है, हालांकि मेरे पास इसका उपयोग करने का कभी कोई अवसर नहीं है। इसी तरह, एलएबीज लोड कर सकते हैं और .wait()निर्भरता मुद्दों को शांत कर सकते हैं, लेकिन यह अभी भी स्कूपिंग नहीं करता है)

जहाँ तक मैं बता सकता हूँ, वहाँ जावास्क्रिप्ट के गतिशील और / या async लोड करने के लिए कई समाधान प्रतीत होते हैं, लेकिन वे HTML से js लोड करने के समान ही स्कूपिंग समस्याएँ हैं। किसी भी चीज़ से अधिक, मैं जावास्क्रिप्ट लोड करने का एक तरीका चाहूंगा जो वैश्विक नाम स्थान को बिल्कुल प्रदूषित नहीं करता है, लेकिन फिर भी मुझे पुस्तकालयों को लोड करने और उपयोग करने की अनुमति देता है (जैसा कि नोड की आवश्यकता है)।

2020 अद्यतन: ES6 में मॉड्यूल अब मानक हैं, और 2020 के मध्य तक अधिकांश ब्राउज़रों द्वारा मूल रूप से समर्थित हैं । मॉड्यूल सिंक्रोनस और एसिंक्रोनस (प्रोमिस का उपयोग करके) लोडिंग दोनों का समर्थन करता है। मेरी वर्तमान सिफारिश यह है कि अधिकांश नई परियोजनाओं को ES6 मॉड्यूल का उपयोग करना चाहिए, और लीगेसी ब्राउज़र के लिए एक जेएस फ़ाइल पर वापस गिरने के लिए एक ट्रांसपिलर का उपयोग करना चाहिए।

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

पिछला संपादन (या यदि आप ES6 मॉड्यूल पसंद नहीं): इस लेखन के बाद से, मैं बड़े पैमाने पर इस्तेमाल किया है RequireJS (जिसका अब बहुत स्पष्ट प्रलेखन है) का उपयोग किया है। मेरे विचार से रिक्जेस्ट वास्तव में सही विकल्प था। मैं स्पष्ट करना चाहता हूं कि सिस्टम उन लोगों के लिए कैसे काम करता है जो मेरे जैसे ही भ्रमित हैं:

आप requireरोजमर्रा के विकास में उपयोग कर सकते हैं । मॉड्यूल एक फ़ंक्शन (आमतौर पर ऑब्जेक्ट या फ़ंक्शन) द्वारा लौटाया जा सकता है और पैरामीटर के रूप में स्कोप किया जाता है। आप तैनाती के लिए अपनी परियोजना को एकल फ़ाइल में भी संकलित कर सकते हैं r.js(व्यवहार में यह लगभग हमेशा तेज होता है, भले ही requireसमानांतर में स्क्रिप्ट लोड कर सकता है)।

आवश्यकता के अनुसार प्राथमिक अंतर और नोड-शैली की आवश्यकता होती है जैसे ब्राउज़राइज़ (एक अच्छा प्रोजेक्ट जो tjameson द्वारा सुझाया गया है) का उपयोग करता है, जिस तरह से मॉड्यूल डिजाइन और आवश्यक हैं:

आवश्यकताएँJ AMD (Async मॉड्यूल परिभाषा) का उपयोग करता है। एएमडी में, requireलोड और एक कॉलबैक फ़ंक्शन के लिए मॉड्यूल (जावास्क्रिप्ट फ़ाइलों) की एक सूची लेता है। जब यह प्रत्येक मॉड्यूल को लोड करता है, तो यह कॉलबैक के पैरामीटर के रूप में प्रत्येक मॉड्यूल के साथ कॉलबैक कहता है। इस प्रकार यह वास्तव में अतुल्यकालिक है और इसलिए वेब के लिए अच्छी तरह से अनुकूल है।
नोड कॉमन का उपयोग करता है। कॉमनजस में, requireएक अवरोधक कॉल है जो एक मॉड्यूल को लोड करता है और इसे एक वस्तु के रूप में लौटाता है। यह नोड के लिए ठीक काम करता है क्योंकि फाइलें फाइल सिस्टम से पढ़ी जाती हैं, जो काफी तेजी से होती है, लेकिन वेब पर खराब काम करती है क्योंकि फाइल को सिंक्रोनाइज़ करने में ज्यादा समय लग सकता है।

व्यवहार में, कई डेवलपर्स ने कभी भी एएमडी को देखने से पहले नोड (और इसलिए कॉमनजेएस) का उपयोग किया है। इसके अलावा, कई पुस्तकालयों / मॉड्यूल कॉमनजस के लिए लिखे जाते हैं (किसी exportsवस्तु में चीजों को जोड़कर ) एएमडी के बजाय ( defineफ़ंक्शन से मॉड्यूल को वापस करके )। इसलिए, बहुत से नोड-आधारित-वेब डेवलपर कॉमनजेएस लाइब्रेरी का उपयोग वेब पर करना चाहते हैं। यह संभव है, चूंकि लोडिंग ए से<script> टैग करना अवरुद्ध है। Browserify जैसे समाधान CommonJS (Node) मॉड्यूल लेते हैं और उन्हें लपेटते हैं ताकि आप उन्हें स्क्रिप्ट टैग के साथ शामिल कर सकें।

इसलिए, यदि आप वेब के लिए अपना स्वयं का मल्टी-फाइल प्रोजेक्ट विकसित कर रहे हैं, तो मैं अत्यधिक रूप से आवश्यकताएँ की सिफारिश करता हूं, क्योंकि यह वास्तव में वेब के लिए एक मॉड्यूल सिस्टम है (हालांकि निष्पक्ष प्रकटीकरण में, मैं एएमडी को कॉमनजेएस की तुलना में बहुत अधिक प्राकृतिक पाता हूं)। हाल ही में, अंतर कम महत्वपूर्ण हो गया है, क्योंकि आवश्यकताएँ अब आपको अनिवार्य रूप से कॉमनजेएस सिंटैक्स का उपयोग करने की अनुमति देती है। इसके अतिरिक्त, एनईआरजेएस का उपयोग नोड में एएमडी मॉड्यूल को लोड करने के लिए किया जा सकता है (हालांकि मैं नोड-एम-लोडर को पसंद करता हूं )।

Question 2

चेक आउट एंडर की । यह बहुत कुछ करता है।

इसके अलावा, ब्राउज़र करें बहुत अच्छा है। मैं का उपयोग किया है की आवश्यकता होती है-चुंबन ¹ और यह काम करता है। शायद अन्य हैं।

मैं आवश्यकताएँ के बारे में निश्चित नहीं हूँ। यह सिर्फ नोड के रूप में ही नहीं है। आप अन्य स्थानों से लोड होने की समस्याओं में भाग सकते हैं, लेकिन यह काम कर सकता है। जब तक एक प्रदान विधि या ऐसा कुछ है जिसे कहा जा सकता है।

टी एल; डॉ - मैं browserify की सलाह देते हैं या आवश्यकता होती है-चुंबन चाहते हैं।

अपडेट करें:

1: की आवश्यकता होती है-चुंबन अब मर चुका है, और लेखक इसे हटा दिया गया है। मैं समस्याओं के बिना आवश्यकता के उपयोग कर रहा हूँ। की आवश्यकता होती है-चुंबन के लेखक ने लिखा है pakmanager और Pakman । पूर्ण प्रकटीकरण, मैं डेवलपर के साथ काम करता हूं।

निजी तौर पर मुझे रिक्जेस्ट बेहतर लगता है। यह डिबग करना बहुत आसान है (आपके पास विकास में अलग-अलग फाइलें हो सकती हैं, और उत्पादन में एक ही तैनात फ़ाइल) और एक ठोस "मानक" पर बनाया गया है।

Question 3

मैंने एक छोटी स्क्रिप्ट लिखी है जो जावास्क्रिप्ट फ़ाइलों के अतुल्यकालिक और तुल्यकालिक लोडिंग की अनुमति देती है, जो यहां कुछ काम का हो सकता है। इसकी कोई निर्भरता नहीं है और यह Node.js और CommonJS के अनुकूल है। स्थापना बहुत आसान है:

$ npm install --save @tarp/require

फिर मुख्य-मॉड्यूल लोड करने के लिए बस अपने HTML में निम्न पंक्तियाँ जोड़ें:

<script src="/node_modules/@tarp/require/require.min.js"></script>
<script>Tarp.require({main: "./scripts/main"});</script>

अपने मुख्य-मॉड्यूल (और किसी भी उप-मॉड्यूल) के अंदर, आप इसका उपयोग कर सकते हैं require()जैसा कि आप इसे कॉमनजस / नोडज से जानते हैं। पूरा डॉक्स और कोड GitHub पर पाया जा सकता है ।

Question 4

इलिया खारलामोव महान उत्तर की विविधता , क्रोम डेवलपर टूल के साथ इसे अच्छा बनाने के लिए कुछ कोड के साथ।

//
///- REQUIRE FN
// equivalent to require from node.js
function require(url){
    if (url.toLowerCase().substr(-3)!=='.js') url+='.js'; // to allow loading without js suffix;
    if (!require.cache) require.cache=[]; //init cache
    var exports=require.cache[url]; //get from cache
    if (!exports) { //not cached
            try {
                exports={};
                var X=new XMLHttpRequest();
                X.open("GET", url, 0); // sync
                X.send();
                if (X.status && X.status !== 200)  throw new Error(X.statusText);
                var source = X.responseText;
                // fix (if saved form for Chrome Dev Tools)
                if (source.substr(0,10)==="(function("){ 
                    var moduleStart = source.indexOf('{');
                    var moduleEnd = source.lastIndexOf('})');
                    var CDTcomment = source.indexOf('//@ ');
                    if (CDTcomment>-1 && CDTcomment<moduleStart+6) moduleStart = source.indexOf('\n',CDTcomment);
                    source = source.slice(moduleStart+1,moduleEnd-1); 
                } 
                // fix, add comment to show source on Chrome Dev Tools
                source="//@ sourceURL="+window.location.origin+url+"\n" + source;
                //------
                var module = { id: url, uri: url, exports:exports }; //according to node.js modules 
                var anonFn = new Function("require", "exports", "module", source); //create a Fn with module code, and 3 params: require, exports & module
                anonFn(require, exports, module); // call the Fn, Execute the module
                require.cache[url]  = exports = module.exports; //cache obj exported by module
            } catch (err) {
                throw new Error("Error loading module "+url+": "+err);
            }
    }
    return exports; //require returns object exported by module
}
///- END REQUIRE FN

Question 5

मुझे लगता है कि शुरुआती लोग अपने कोड को व्यवस्थित करने के लिए देख रहे होंगे। यह 2020 है , और यदि आप एक मॉड्यूलर जेएस ऐप पर विचार कर रहे हैं, तो आपको अभी npm और Webpack से शुरुआत करनी चाहिए ।

आरंभ करने के लिए यहां कुछ सरल उपाय दिए गए हैं:

अपने प्रोजेक्ट रूट में, npm init -yएक npm प्रोजेक्ट को इनिशियलाइज़ करने के लिए चलाएँ
वेबपैक मॉड्यूल बंडल डाउनलोड करें: npm install webpack webpack-cli
एक index.html फ़ाइल बनाएँ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>App</title>
</head>
<body>

    <script src="_bundle.js"></script>
</body>
</html>

_bundle.jsफ़ाइल पर विशेष ध्यान दें - यह एक अंतिम JS फाइल होगी जो वेबपैक द्वारा बनाई गई है, आप इसे सीधे संशोधित नहीं करेंगे (पढ़ते रहें)।

वह बनाएं <project-root>/app.jsजिसमें आप अन्य मॉड्यूल आयात करेंगे:

const printHello = require('./print-hello');

printHello();

एक नमूना print-hello.jsमॉड्यूल बनाएँ :

module.exports = function() {
    console.log('Hello World!');
}

<project-root>/webpack.config.jsनिम्नलिखित बनाएँ और कॉपी-पेस्ट करें:

var path = require('path');

module.exports = {
  entry: './app.js',
  output: {
    path: path.resolve(__dirname),
    filename: '_bundle.js'
  }
};

उपरोक्त कोड में, 2 बिंदु हैं:

प्रविष्टि app.jsवह है जहाँ आप अपना JS कोड लिखेंगे। यह अन्य मॉड्यूल आयात करेगा जैसा कि ऊपर दिखाया गया है।
आउटपुट _bundle.jsआपका अंतिम बंडल है जो वेबपैक द्वारा उत्पन्न होता है। यह वही है जो आपका html अंत में देखेगा।

-7। अपने को खोलें package.js, और scriptsनिम्न कमांड से बदलें :

  "scripts": {
    "start": "webpack --mode production -w"
  },

और अंत में स्क्रिप्ट वॉच को चलाएं और रन करके फाइल app.jsजेनरेट करें :।_bundle.jsnpm start
कोडिंग का आनंद लें!

Question 6

(function () {
    // c is cache, the rest are the constants
    var c = {},s="status",t="Text",e="exports",E="Error",r="require",m="module",S=" ",w=window;
    w[r]=function R(url) {
        url+=/.js$/i.test(url) ? "" : ".js";// to allow loading without js suffix;
        var X=new XMLHttpRequest(),module = { id: url, uri: url }; //according to the modules 1.1 standard
        if (!c[url])
            try {
                X.open("GET", url, 0); // sync
                X.send();
                if (X[s] && X[s] != 200) 
                    throw X[s+t];
                Function(r, e, m, X['response'+t])(R, c[url]={}, module); // Execute the module
                module[e] && (c[url]=module[e]);
            } catch (x) {
                throw w[E](E+" in "+r+": Can't load "+m+S+url+":"+S+x);
            }
        return c[url];
    }
})();

अवरुद्ध होने के कारण उत्पादन में उपयोग नहीं किया जाना बेहतर है। (नोड में ।js, की आवश्यकता है () एक अवरुद्ध कॉल अच्छी तरह से है)।

Question 7

Webmake ब्राउज़र को नोड-स्टाइल मॉड्यूल बंडल करता है, इसे आज़माएं।

Question 8

आवश्यकता-ठूंठ - requireब्राउज़र में नोड-अनुरूप प्रदान करता है, दोनों मॉड्यूल और रिश्तेदार पथ को हल करता है। TKRequire (XMLHttpRequest) के समान टेक्निक का उपयोग करता है। परिणामी कोड पूरी तरह से ब्राउज़र योग्य है, इसके require-stubलिए एक प्रतिस्थापन के रूप में काम कर सकता है watchify।

Question 9

यहाँ लुसिओ एम। टेटो के शानदार उत्तर का विस्तार है जो सापेक्ष रास्तों के साथ मॉड्यूल के पुनरावर्ती लोडिंग के लिए अनुमति देता है।

यहां समाधान के लिए एक गीथब प्रोजेक्ट है और इसका उपयोग कैसे करना है इसका एक उदाहरण है:

https://github.com/trausti/TKRequire.js

TKRequire.js का उपयोग करने के लिए, अपने हेडर में निम्न पंक्ति शामिल करें

<script type = "text / javascript" src = "।/ TKRequire.js"> </ script>

फिर नोड की तरह मॉड्यूल लोड करें। जेएस:

var MyModule = आवश्यकता ("/। रिश्तेदार / पथ / से / MyModule.js");