browserify 入门：导入本地文件？

Question

我一直在制作一个 JavaScript 应用程序的原型，现在我想使用 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;

Answer 2

我刚刚解决了这个错误一段时间，我会 post 我的解决方案，以防其他人遇到我遇到的同样问题。似乎 Browserify 有时无法根据 require 的位置找到本地模块。此代码无效：

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

但这工作正常：

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

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

browserify 入门：导入本地文件？

Getting started with browserify: import local files?

javascript

browserify