Pierwsze kroki z przeglądaniem: importować pliki lokalne?

Question

Prototypuję aplikację JavaScript, a teraz chcę przejść do bardziej niezawodnej konfiguracji przy użyciu metody browserify i zarządzania zależnościami z wymaganiem.

Obecnie mam następujące pliki w mojej aplikacji:

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

highcharts-options.js jest w zasadzie lista stałych, natomiast chart.js wygląda następująco ...

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

i form.js wygląda następująco:

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

A potem ja mam stronę index.html który importuje wszystko, co następuje:

<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> 

Więc teraz chcę przenieść to do bardziej nowoczesnych instalacji z browserify.

usunąłem katalog vendor a zamiast tego stworzony plik index.js i plik package.json, więc teraz moja struktura katalogów wygląda następująco:

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

Mam biegać npm i --save highcharts-browserify i npm i --save jquery i że uratował te moduły package.json i zainstalowano je w node_modules. Dodałem także zadanie build w package.json: browserify index.js -o bundle.js. A w moim szablonie z przodu wiem, że mam:

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

Jak dotąd tak dobrze.

Moje pytanie brzmi: co umieścić w moim pliku index.js, ponieważ nie jestem pewien, jak zaimportować pliki, które już mam. Do tej pory mam to:

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

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

myForm.setup(); 

Ale gdy próbuję zbudować to, otrzymuję:

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

Wygląda na to wymagać nie wie jak znaleźć tego pliku, czyli jak zaimportuj to, co nie jest zaskakujące, biorąc pod uwagę, że to wszystko jest całkowita domysłowa z mojej strony.

W jaki sposób należy dostosować te pliki do pracy w bardziej modularny sposób? Czy jestem na właściwej linii, czy jest to całkowicie niewłaściwe podejście? Nie jestem nawet pewien, po co powinienem się kierować.

(NB: W końcu chcę byłaby chart.js i form.js użyć kręgosłup, ale muszę pracować jeden krok na raz.)

Answer 1

Jesteś bardzo blisko!

pierwsze, sposób odwołać moduł w tym samym katalogu, to znaczy:

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

bez początkowego składnika ścieżki, wymagać będzie wyglądać w katalogu pakietu npm.

Po drugie, musisz wyeksportować zmienne w modułach, aby mogły być używane gdzie indziej. Więc moduł forma musi wyglądać tak:

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

Właśnie skończyłem zmaga się z tego błędu na chwilę, wyślę moje rozwiązanie w przypadku ktokolwiek inny prowadzi do tego samego problemu zrobiłem. Wygląda na to, że Browserify czasami nie może znaleźć lokalnych modułów w zależności od tego, dokąd zmierza require. Ten kod nie działa:

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

ale to działało w porządku:

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

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