javascript - Browserify 不起作用 - 为什么？

Question

我将以下代码浏览到 bundle.js，并将其包含在我的前端(在加载任何其他 .js 文件之前)。我浏览的文件就是这个:

var firebase = require('firebase')

然后我在前端包含的下一个文件中对此变量调用 authorize()，但我收到一条错误消息说 firebase 未定义？

Answer 1

Browserify 是一个模块 bundler ，可让您在浏览器中使用 CommonJS (Node) 模块。这意味着您的项目必须遵循 CommonJS 约定来导出(exports、module.exports)和导入(require ) 模块。这是一个基本示例:

您的模块 (module.js)

var foo = function () {
  console.log('Foo');
};

var bar = function () {
  console.log('Bar');
};

module.exports = {
  foo: foo,
  bar: bar
};

您的入口点 (main.js)

var module = require('./module');

module.foo(); // Foo
module.bar(); // Bar

此代码可直接用于 Node，但您的浏览器无法解释它。这就是 Browserify 有用的地方......

当您在入口点运行命令 browserify main.js -o bundle.js 时，Browserify 会遍历所有依赖项(此处为 module.js)并加载它们在一个包中。该包可在您的浏览器中使用，因此您现在可以将其加载到脚本标签中:

<script src="bundle.js"></script>