javascript - browserify 入门 : import local files?

Question

我一直在制作一个 JavaScript 应用程序的原型(prototype)，现在我想使用 browserify 进行更强大的设置，并使用 require 管理依赖项。

目前我的应用程序中有以下文件:

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 中。我还在 package.json 中添加了一个 build 任务: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'

看起来 require 不知道如何找到这个文件，或者如何导入它，这并不奇怪，因为这完全是我的猜测。

我应该如何调整这些文件以更加模块化的方式工作？我是在正确的路线上，还是这完全是错误的方法？我什至不确定我应该用谷歌搜索什么。

(注意:最终我想重构 chart.js 和 form.js 以使用 Backbone，但我需要一步一个脚印。)

Answer 1

你非常接近!

首先，在同一个目录下引用一个模块的方式是说:

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

如果没有前导路径组件，require 将在您的 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;