如果你正在使用grunt

Question

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

未捕获的ReferenceError：未定义require

我正在关注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

＆＃34;要求＆＃34;功能仅适用于＆＃34; bundle.js＆＃34;脚本上下文。 Browserify将获取所有必需的脚本文件，并将它们放入＆＃34; bundle.js＆＃34;文件，所以你只需要包含＆＃34; bundle.js＆＃34;在HTML文件中，而不是＆＃34; script.js＆＃34;文件。

Answer 2

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

有一个简单的解决方法，这使得这项工作。这是我的browserify文件中的某个地方：

window.require = require;

这会将require公开到＆＃34;全球＆＃34;命名空间。然后，您可以从script.js。

中获得所需的全部内容

但是，您确实放弃了一个优势：您必须在browserify文件中包含所有必需的库。那么你找不到所有的依赖关系，你就不会感到奢侈！

我完全希望人们哭泣＆＃34;肮脏的黑客＆＃34;或者＆＃34;这不是它的意思＆＃34;。也许吧。但我希望这些文件分开。只要我不包含任何其他被称为＆＃34;要求＆＃34;的东西，我就会没事的，非常感谢你。

有时一个全球性可以发挥重要作用。

Answer 3

简短回答：删除script.js import

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

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

Answer 4

似乎要运行这样的脚本，你必须在bundle上使用standalone。

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

之后，您应该window.Bundle中有bundle.js 那么此时您应该可以从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;

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

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

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

在bundle.js的末尾插入：

window.Bundle = window.Bundle.default;

所以现在你将拥有：

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

来源

Standalone browserify builds

使用browserify时，require未定义错误

4 个答案:

如果你正在使用grunt

如果您正在使用gulp

如果你正在使用babel

来源