Javascript 未使用browserify定义require错误_Javascript_Node.js_Browserify

Javascript 未使用browserify定义require错误

javascript node.js

Javascript 未使用browserify定义require错误,javascript,node.js,browserify,Javascript,Node.js,Browserify,我是browserify新手，尝试在浏览器中加载npm模块，但出现以下错误：未捕获引用错误：未定义require 我正在跟随来自的教程。已创建包含以下内容的javascript文件： var unique=require（'uniq'）然后跑 npm安装uniq 及 browserify main.js-o bundle.js bundle.js文件已经生成，我将其包含在我的html中，但仍然得到上面的错误。知道我做错了什么吗这是最终HTML文件的内容： <!DOCTYPE html

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

未捕获引用错误：未定义require

我正在跟随来自的教程。已创建包含以下内容的javascript文件：

var unique=require（'uniq'）

然后跑

npm安装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的内容：

这是script.js：

var unique=require（'uniq'）

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

更长的答案：由于浏览器中未定义方法

require

，因此出现错误。您不应该包括

script.js

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

require

d文件连接到bundle中。

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

我个人更喜欢将库代码和应用程序代码分开。因此，我还创建了类似于

bundle.js

和

script.js

的东西

有一个简单的解决办法，使这项工作。这在我的browserify文件中的某个位置：

window.require = require;

这将把

require

暴露到“全局”命名空间中。然后，您可以从

script.js

中获得所需的一切

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

我完全希望人们会喊“肮脏的黑客”或“这不是它的本意”。是的，也许吧。但我想把这些文件分开。只要我不包括任何其他被称为“需要”的内容，我会很好的，非常感谢

有时，一个全局脚本可以带来所有的不同。

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

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

之后，您应该在

Bundle.js

中有

window.Bundle

因此，此时您应该能够从

script.js

访问

npm install grunt-browserify --save-dev

如果您正在使用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 有关Chart.js gulp文件，请参见

如果你用的是巴贝尔如果您使用的是babel和

es6

，那么您很可能正在导出

捆绑包

类

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

npm install grunt-browserify --save-dev

在bundle.js的末尾插入：

window.Bundle = window.Bundle.default;

因此，现在您将有：

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

来源

您能为上下文发布更多代码吗？bundle.js和脚本的内容是什么。js@sma刚刚用这两个文件的内容更新了问题。因此，我不需要为此目的捆绑在一起的模块。？在运行browserify之前，您可以在编写的源代码中使用“require”。因此，在源javascript中，您可以需要任何您需要的模块，然后当您浏览源代码时，它会将所有源代码（包括您需要的模块）打包到“bundle.js”文件中，您可以在html中引用该文件。希望有帮助！我现在明白了-browserify不会创建一个可以从浏览器中获取（）的模块-它会打包您的代码并将整个内容打包成一个闭包-您需要特殊的步骤来创建一个可以从浏览器中使用的库。我会找出这些步骤，并将它们添加到这个答案中，因为很多人都会对OP和我自己产生相同的误解。关于Babel和Bundle.default（）的结尾部分没有意义。现在您将看到：“new Bundle.default（），这与之前的几段内容没有什么不同。tnx@joedotnot fixed。您所扣除的覆盖的要点是使

var bundle=new bundle（）