Per iniziare con browserify: importa file locali?

Question

Sono stato prototipare un'applicazione JavaScript e ora voglio passare a una configurazione più solida utilizzando browserify e gestendo le dipendenze con require.

Attualmente ho i seguenti file nella mia domanda:

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

highcharts-options.js è fondamentalmente un elenco di costanti, mentre chart.js assomiglia a questo ...

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

e form.js si presenta così:

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

E quindi I avere una pagina index.html che importa tutto come segue:

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

Quindi ora voglio spostare questo a una configurazione più moderno con browserify.

Ho cancellato la directory vendor e invece creato un file index.js e un file package.json, così ora la mia struttura di directory assomiglia a questo:

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

Ho eseguito npm i --save highcharts-browserify e npm i --save jquery e che ha salvato questi moduli per package.json e li ha installati in node_modules. Ho anche aggiunto un'attività build in package.json: browserify index.js -o bundle.js. E nel mio modello front-end so solo di avere:

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

Fin qui tutto bene.

La mia domanda è cosa inserire nel file index.js, perché non sono sicuro di come importare i file che ho già. Finora ho ottenuto questo:

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

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

myForm.setup(); 

Ma quando provo a costruire questo, ottengo:

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

Sembra che richiedono non sa come trovare questo file, o come importarlo, il che non è sorprendente dato che questo è tutto un tentativo di supposizioni da parte mia.

Come devo adattare questi file per funzionare in modo più modulare? Sono sulla linea giusta, o questo è completamente l'approccio sbagliato? Non sono nemmeno sicuro di cosa dovrei cercare su Google.

(NB: Alla fine voglio refactoring chart.js e form.js utilizzare Backbone, ma ho bisogno di lavorare un passo alla volta.)

Answer 1

Vi sono molto vicino!

In primo luogo, il modo per fare riferimento a un modulo nella stessa directory è dire:

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

senza il componente principale percorso, richiedono cercherà nella directory del pacchetto NPM.

In secondo luogo, è necessario esportare le variabili nei moduli in modo che possano essere utilizzate altrove. Così il vostro modulo di modulo deve essere simile a questa:

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

Ho appena finito alle prese con questo errore per un po ', vi posterò la mia soluzione nel caso in cui nessun altro corre lo stesso problema che ho fatto. Sembra che Browserify a volte non riesca a trovare i moduli locali a seconda di dove va il require. Questo codice non ha funzionato:

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

ma questo ha funzionato bene:

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

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