Начало работы с браузером: импорт локальных файлов?

Question

Я прототипировал приложение JavaScript, и теперь я хочу перейти к более надежной настройке с помощью браузера и управления зависимостями с требованием.

В настоящее время у меня есть следующие файлы в моем приложении:

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(); 

А затем я есть страница index.html, которая импортирует все следующим образом:

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

Так что теперь я хочу, чтобы переместить это более современный установки с browserify.

Я удалил каталог 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. Я также добавил задачу build в 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' 

Похоже, требуется не знает, как найти этот файл, или как импортируйте его, что неудивительно, учитывая, что это полная догадка с моей стороны.

Как я могу адаптировать эти файлы для работы более модульным способом? Я на правильных линиях, или это совершенно неправильный подход? Я даже не уверен, для чего я должен быть Googling.

(NB: В конце концов, я хочу, чтобы реорганизовать chart.js и form.js использовать Backbone, но мне нужно работать на один шаг за один раз.)

Answer 1

Вы очень близки!

Во-первых, способ ссылаться на модуль в том же каталоге есть:

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

Без ведущего компонента пути, требуют будет выглядеть в каталоге НПМ пакета.

Во-вторых, вам нужно экспортировать переменные в модули, чтобы их можно было использовать в другом месте. Так что ваш модуль формы должен выглядеть примерно так:

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

Я только что закончил бороться с этой ошибкой на некоторое время, я отправлю свое решение в случае, если кто-то работает в том же номере я сделал. Похоже, что Browserify иногда не может найти локальные модули в зависимости от того, куда идет require. Этот код не работает:

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

, но это работало отлично:

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

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