browserify 入门：导入本地文件？答案

【问题标题】：Getting started with browserify: import local files?browserify 入门：导入本地文件？
【发布时间】：2015-05-21 11:38:10
【问题描述】：

我一直在对 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，但我需要一步一步地工作。）

【问题讨论】：

标签： javascript browserify

【解决方案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;

【讨论】：

【解决方案2】：

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

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

但这很好用：

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

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

【讨论】：