require is not defined 错误与 browserify

Question

我是 browserify 的新手，正在尝试在浏览器中加载 npm 模块，但出现以下错误：

Uncaught ReferenceError: require is not defined

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

var unique = require('uniq');

然后运行

npm install uniq

和

browserify 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');

Answer 1

简答：移除script.js导入

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

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

Answer 2

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

Answer 3

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

的东西

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

window.require = require;

这会将 require 公开到 "global" 命名空间中。然后，您可以从 script.js.

中获取您想要的一切

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

我完全希望人们哭泣 "dirty hack" 或 "this is not how it's meant to be"。也许吧。但我希望这些文件分开。只要我不包含任何其他称为 "require" 的内容，我就可以了，非常感谢。

有时一个全球性的东西可以改变一切。

Answer 4

似乎要运行像这样的脚本你必须在包上使用独立的。

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

在那之后你应该在 bundle.js 中有 window.Bundle。
所以到那时你应该能够从 script.js 访问。

如果您使用的是 g运行t

如果您正在使用 grunt，请安装 grunt-browserify。

npm install grunt-browserify --save-dev

然后在 grunt.js G运行tfile:

// 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));

请参阅 here Chart.js gulp 文件。

如果你使用的是 babel

如果您正在使用 babel 并且 es6 可能您正在导出 Bundle class。

// 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

require is not defined 错误与 browserify

require is not defined error with browserify

javascript

node.js

browserify

如果您使用的是 g运行t

如果您正在使用 gulp

如果你使用的是 babel

来源