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

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

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

window.require = require;

这将暴露require在“全局”命名空间中。然后，您可以从script.js.

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

我完全希望人们会喊出“肮脏的黑客”或“这不是它的本意”。也许吧。但我希望这些文件分开。只要我不包括任何其他称为“需要”的东西，我就没事，非常感谢。

有时，一个全局变量可以使一切变得不同。

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

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

之后你应该window.Bundle在bundle.js.
因此，此时您应该能够从script.js.

如果你使用 grunt

如果您使用的是grunt安装grunt-browserify.

npm install grunt-browserify --save-dev

然后在grunt.jsGruntfile 上：

// 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 文件，请参见此处。

如果你使用 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使用Bundle.default.

在 bundle.js 的末尾插入：

window.Bundle = window.Bundle.default;

所以现在你将拥有：

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

来源

独立的 browserify 构建

简短回答：删除 script.js 导入

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

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