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中。我还在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'

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

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

（注意：最终我想重构chart.js和form.js以使用Backbone，但我需要一步一步。）

Answer 1

你非常接近！

首先，引用同一目录中的模块的方法是：

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

如果没有前导路径组件，则需要查看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

我刚刚在这个错误中挣扎了一段时间，我会发布我的解决方案，以防其他人遇到同样的问题。似乎Browserify有时无法根据require的位置找到本地模块。这段代码不起作用：

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

但这很好用：

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

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

browserify入门：导入本地文件？

2 个答案: