【问题标题】：require is not defined error with browserify使用 browserify 时未定义 require 错误
【发布时间】：2015-04-26 02:50:14
【问题描述】：

我是 browserify 新手并尝试在浏览器中加载 npm 模块，但我收到以下错误：

Uncaught ReferenceError: require is not defined

我正在学习来自http://browserify.org/ 的教程。创建了包含以下内容的 javascript 文件：

var unique = require('uniq');

然后运行

npm install uniq

和

浏览 main.js -o bundle.js

生成了 bundle.js 文件，我将它包含在我的 html 中，但仍然出现上述错误。任何想法我做错了什么？

这是最终 HTML 文件的内容：

<!DOCTYPE html>
<html>
<head>
    <title></title>

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

</body>
</html>

这是 bundle.js 的内容：http://pastebin.com/1ECkBceB

这是 script.js：

var unique = require('uniq');

【问题讨论】：

你能发布更多的上下文代码吗？ bundle.js 和 script.js 的内容是什么
@sma 刚刚用两个文件的内容更新了问题。

标签： javascript node.js browserify

【解决方案1】：

简答：删除 script.js 导入

更长的答案：您收到错误是因为方法 require 未在浏览器中定义。你不应该包含script.js。

Browserify 背后的想法是，您可以使用 CommonJS 模块拆分源代码，并将它们捆绑到一个文件中以在浏览器中使用。 Browserify 将遍历您的所有源并将所有 required 文件连接到包中。

【讨论】：

【解决方案2】：

“require”函数仅在“bundle.js”脚本上下文中可用。 Browserify 将获取所有必要的脚本文件并将它们放入“bundle.js”文件中，因此您只需在 HTML 文件中包含“bundle.js”，而不是“script.js”文件。

【讨论】：

所以我不能要求为此目的捆绑在一起的模块..？
您可以在运行 browserify 之前在您编写的源代码中使用“require”。因此，在您的源 javascript 中，您可以要求任何您需要的模块，然后当您浏览源代码时，它会将所有源代码（包括您需要的模块）打包到您可以在 html 中引用的“bundle.js”文件中。希望有帮助！
我现在明白了——browserify 不会创建你可以从浏览器 require() 的模块——它会打包你的代码并将整个东西包装在一个闭包中——你需要特殊的步骤来创建一个库您可以从浏览器中使用。我会弄清楚这些步骤并将它们添加到这个答案中，因为很多人都会对 OP 和我自己产生同样的误解。

【解决方案3】：

我个人更喜欢将我的库代码和应用程序代码分开。所以我也创建了bundle.js 和script.js 之类的东西。

有一个简单的解决方法，可以使这项工作。这是我的浏览器文件中的某个地方：

window.require = require;

这会将require 暴露到“全局”命名空间中。然后，您可以从您的script.js 获取您想要的所有内容。

不过，您确实放弃了一个优势：您必须在 browserify 文件中包含所有必需的库。那么，你不会得到它找到所有依赖项的奢侈！

我完全希望人们会喊“肮脏的黑客”或“这不是它的本意”。也许吧。但我希望这些文件分开。只要我不包含任何其他所谓的“要求”，我就可以了，非常感谢。

有时一个全局变量可以发挥重要作用。

【讨论】：

【解决方案4】：

似乎要运行这样的脚本，您必须在捆绑包上使用独立的。

browserify main.js --standalone Bundle > bundle.js

之后，您应该在bundle.js 中有window.Bundle。
因此，此时您应该可以从script.js 访问。

如果你正在使用 grunt

如果您使用的是grunt，请安装grunt-browserify。

npm install grunt-browserify --save-dev

然后在grunt.js Gruntfile：

// Add the task
grunt.loadNpmTasks('grunt-browserify');

// Add the configuration:
browserify: {
    dist: {
        options: {
            // uncomment if you use babel
            // transform: [
            //     ["babelify", { "presets": ["env"] }]
            // ],
            browserifyOptions: {
                standalone: 'Bundle'
            }
        },
        files: {
           "bundle.js": ["main.js"]
        }
    }
},

如果你正在使用 gulp

 // on your build task
 var bundled = browserify('main.js', { standalone: 'Bundle' })
               .bundle()
               .pipe(source('bundle.js'))
               .pipe(gulp.dest(outDir));

有关 Chart.js gulp 文件，请参阅 here。

如果你正在使用 babel

如果您使用的是 babel 和 es6，那么您可能正在导出您的 Bundle 类。

// you should have something like that 

class Bundle {
    ...

}

export default Bundle;

所以因为 babel 现在要使用 Bundle 你应该使用 Bundle.default 等等：

// in script.js
var bundle = new Bundle.default();

要避免这种语法，您可以用Bundle.default 覆盖Bundle。

在 bundle.js 末尾插入：

window.Bundle = window.Bundle.default;

所以现在你将拥有：

// in script.js
var bundle = new Bundle();

来源

Standalone browserify builds

【讨论】：

关于 Babel 和 Bundle.default().. 的结尾部分没有意义。 “所以现在你将拥有：” new Bundle.default() 这与你之前的几段没有什么不同。
tnx @joedotnot 修复。您扣除的覆盖的要点是拥有var bundle = new Bundle();