Javascript 使用 browserify 要求未定义错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28696511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
require is not defined error with browserify
提问by King Julien
I'm new to browserify and trying to load npm modules in browser but I'm getting the following error:
我是 browserify 的新手，并尝试在浏览器中加载 npm 模块，但出现以下错误：
Uncaught ReferenceError: require is not defined
未捕获的 ReferenceError：需要未定义
I'm following the tutorial from http://browserify.org/. Created javascript file with the following content:
我正在关注http://browserify.org/ 中的教程。使用以下内容创建了 javascript 文件：
var unique = require('uniq');
var unique = require('uniq');
then run
然后运行
npm install uniq
npm 安装 uniq
and
和
browserify main.js -o bundle.js
browserify main.js -o bundle.js
the bundle.js file is generated and I included it in my html but still getting the above error. Any ideas what am I doing wrong?
生成了 bundle.js 文件，我将它包含在我的 html 中，但仍然出现上述错误。任何想法我做错了什么？
This is the content of final HTML file:
这是最终 HTML 文件的内容：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="bundle.js"></script>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
This is the content of bundle.js: http://pastebin.com/1ECkBceB
这是 bundle.js 的内容：http://pastebin.com/1ECkBceB
and this is script.js:
这是script.js：
var unique = require('uniq');
var unique = require('uniq');
回答by kevinvile
The "require" function is only available in the "bundle.js" script context. Browserify will take all the script files necessary and put them into the "bundle.js" file, so you should only have to include "bundle.js" in the HTML file, not the "script.js" file.
“require”函数仅在“bundle.js”脚本上下文中可用。Browserify 将获取所有必需的脚本文件并将它们放入“bundle.js”文件中，因此您只需要在 HTML 文件中包含“bundle.js”，而不是“script.js”文件。
回答by amenthes
I personally prefer to keep my library code and application code seperate. So i also create something like a bundle.jsand a script.js.
我个人更喜欢将我的库代码和应用程序代码分开。所以我也创建了类似 abundle.js和 a 的东西script.js。
there is a simple workaround, that makes this work. This is somewhere in my browserify-file:
有一个简单的解决方法，使这项工作。这是我的浏览器文件中的某处：
window.require = require;
this will expose requireinto the "global" namespace. You can then require all you want from your script.js.
这将暴露require在“全局”命名空间中。然后，您可以从script.js.
You do give up ONE advantage, though: you'll have to include all the required libraries in your browserify file. You don't get the luxury of it finding all your dependencies, then!
但是，您确实放弃了一个优势：您必须在 browserify 文件中包含所有必需的库。那么，您不会有幸找到所有依赖项！
I fully expect people to cry "dirty hack" or "this is not how it's meant to be". Yes, maybe. But I want those files seperate. And as long as i don't include anything else that is called "require", i'll be fine, thank you very much.
我完全希望人们会喊出“肮脏的黑客”或“这不是它的本意”。也许吧。但我希望这些文件分开。只要我不包括任何其他称为“要求”的内容，我就没事，非常感谢。
Sometimes one global can make all the difference.
有时，一个全局变量可以使一切变得不同。
回答by borracciaBlu
It seems that to run a script like that you have to use standalone on the bundle.
似乎要运行这样的脚本，您必须在捆绑包上使用 standalone。
browserify main.js --standalone Bundle > bundle.js
After that you should have window.Bundlein bundle.js.
So at that point you should be able to access from script.js.
之后你应该window.Bundle在bundle.js.
因此，此时您应该能够从script.js.
if you are using grunt
如果你使用 grunt
If you are using gruntinstall grunt-browserify.
如果您正在使用grunt安装grunt-browserify.
npm install grunt-browserify --save-dev
And then on grunt.jsGruntfile:
然后在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"]
}
}
},
if you are using gulp
如果你使用 gulp
// on your build task
var bundled = browserify('main.js', { standalone: 'Bundle' })
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest(outDir));
See herefor Chart.js gulp file.
有关Chart.js gulp 文件，请参见此处。
if you are using babel
如果你使用 babel
If you are using babel and es6probably you are exporting your Bundleclass.
如果您正在使用 babel 并且es6可能正在导出您的Bundle课程。
// you should have something like that
class Bundle {
...
}
export default Bundle;
So because of babel now to use Bundleyou should use Bundle.defaultand so:
因此，由于 babel 现在要使用，Bundle您应该使用Bundle.default等：
// in script.js
var bundle = new Bundle.default();
To avoid this syntax you can override Bundlewith Bundle.default.
为避免这种语法，您可以Bundle使用Bundle.default.
At the end of bundle.js insert:
在 bundle.js 的末尾插入：
window.Bundle = window.Bundle.default;
So now on you'll have :
所以现在你将拥有：
// in script.js
var bundle = new Bundle();
Sources
来源
回答by thomaux
Short answer: remove the script.js import
简短回答：删除 script.js 导入
Longer answer:
You are getting the error because the method requireis not defined in the browser. You shouldn't include script.js.
更长的答案：您收到错误是因为该方法require未在浏览器中定义。你不应该包括script.js.
The idea behind Browserify is that you can split up your sources using CommonJS modules and bundle them into one file to be used in the browser. Browserify will traverse all your sources and will concatenate all required files into the bundle.
Browserify 背后的想法是您可以使用 CommonJS 模块拆分源并将它们捆绑到一个文件中以在浏览器中使用。Browserify 将遍历您的所有源并将所有required 文件连接到包中。
