ब्राउज़र के साथ शुरू करना: स्थानीय फाइल आयात करें?

Question

मैं एक जावास्क्रिप्ट एप्लिकेशन प्रोटोटाइप कर रहा हूं और अब मैं ब्राउजरिफ़ और आवश्यकता के साथ निर्भरता प्रबंधन का उपयोग करके एक और मजबूत सेटअप में जाना चाहता हूं।

वर्तमान में मेरे पास अपने आवेदन में निम्न फ़ाइलें:

chart.js 
form.js 
highcharts-options.js 
vendor/ 
    highcharts.js 
    jquery.js 

highcharts-options.js मूल रूप से, स्थिरांक की एक सूची है, जबकि chart.js इस तरह दिखता है ...

var myChart = { 
    setup: function(data) { ... this.render(data); }, 
    render: function(data) { ... } 
}, 

और form.js इस तरह दिखता है:

var myForm = { 
    setup: function() { button.onclick(_this.getData(); }, 
    getData: function() { // on ajax complete, callChart }, 
    callChart: function() { myChart.setup(data); } 
}; 
myForm.setup(); 

और फिर मैं तो अब मैं browserify के साथ एक और अधिक आधुनिक सेटअप करने के लिए इस ले जाना चाहते हैं

<script src="/js/vendor/highcharts.js"></script> 
<script src="/js/vendor/jquery.js"></script> 
<script src="/js/highcharts-options.js"></script> 
<script src="/js/chart.js"></script> 
<script src="/js/form.js"></script> 

: एक index.html पृष्ठ है कि सब कुछ का आयात करता है इस प्रकार है।

मैं vendor निर्देशिका नष्ट कर दिया है और इसके बजाय एक index.js फाइल और एक package.json फ़ाइल बनाई है, इसलिए अब मेरी निर्देशिका संरचना इस तरह दिखता है:

index.js 
package.json 
chart.js 
form.js 
highcharts-options.js 
node_modules/ 

मैं npm i --save highcharts-browserify और npm i --save jquery चलाने और उस के लिए इन मॉड्यूल बचाया है package.json और उन्हें node_modules में स्थापित किया गया। मैंने कार्य को package.json में जोड़ा है: browserify index.js -o bundle.js। और मेरे सामने वाले टेम्पलेट में मुझे पता है कि:

<script src="/js/bundle.js"></script> 

अभी तक इतना अच्छा है।

मेरा प्रश्न है कि मेरी index.js फ़ाइल में डालना है, क्योंकि मुझे यकीन नहीं है कि मेरे पास पहले से मौजूद फ़ाइलों को कैसे आयात किया जाए। अब तक मैं इस मिल गया है:

var $ = require('jquery'); 
var HighCharts = require('highcharts-browserify'); 

var options = require('highcharts-options'); 
var myChart = require('chart'); 
var myForm = require('form'); 

myForm.setup(); 

लेकिन जब मैं इस बनाने की कोशिश, मैं मिलता है:

Error: Cannot find module 'chart' from '/mypath/static/js/app' 

ऐसा लगता है की आवश्यकता होती है की तरह पता नहीं है इस फ़ाइल को लगाने के लिए कैसे, या कैसे करने के लिए इसे आयात करें, जो आश्चर्यजनक नहीं है कि यह मेरे हिस्से पर कुल अनुमान है।

मुझे इन फ़ाइलों को अधिक मॉड्यूलर तरीके से कैसे काम करना चाहिए? क्या मैं सही लाइनों पर हूं, या यह पूरी तरह से गलत दृष्टिकोण है? मुझे यह भी यकीन नहीं है कि मुझे किसके लिए गुगल करना चाहिए।

(एनबी: आखिरकार मैं chart.js और form.js refactor करने के लिए रीढ़ का उपयोग करना चाहते हैं, लेकिन मैं एक समय में एक कदम काम करने की जरूरत है।)

Answer 1

तुम बहुत करीब हैं!

पहले, जिस तरह से एक ही निर्देशिका में एक मॉड्यूल को संदर्भित करने के कहने के लिए है:

var myChart = require('./chart'); 

अग्रणी पथ घटक के बिना

, की आवश्यकता होती है अपने NPM पैकेज निर्देशिका में दिखेगा।

दूसरा, आपको मॉड्यूल में चर निर्यात करने की आवश्यकता है ताकि उन्हें कहीं और इस्तेमाल किया जा सके। तो अपने प्रपत्र मॉड्यूल कुछ इस तरह ही नज़र आना चाहिए:

var myForm = { 
    setup: function() { button.onclick(_this.getData(); }, 
    getData: function() { // on ajax complete, callChart }, 
    callChart: function() { myChart.setup(data); } 
}; 
myForm.setup(); 
module.exports = myForm; 

Answer 2

मैं बस थोड़ी देर के लिए इस त्रुटि के साथ संघर्ष कर समाप्त, मैं एक ही मुद्दा मैंने किया था में किसी और मामले किसी को भी चलाता है में अपने समाधान पोस्ट करेंगे। ऐसा लगता है कि कभी-कभी ब्राउज़र को require कहां पर स्थानीय मॉड्यूल नहीं मिल सकता है। इस कोड काम नहीं किया:

window.Namespace = { 
    foo: new require('./foo.js')() 
}; 

लेकिन यह ठीक काम किया:

var Foo = require('./foo.js'); 

window.Namespace = { 
    foo: new Foo() 
};