使用 browserify 未定义要求错误
[英]require is not defined error with browserify
问题描述
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
I'm following the tutorial from http://browserify.org/ .我正在关注http://browserify.org/ 中的教程。 Created javascript file with the following content:创建了具有以下内容的 javascript 文件：
var unique = require('uniq');
then run然后运行
npm install uniq
and和
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.生成了 bundle.js 文件，我将它包含在我的 html 中，但仍然出现上述错误。 Any ideas what am I doing wrong?任何想法我做错了什么？
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');
4 个解决方案
解决方案1
40 已采纳 2015-02-24 13:11:41
The "require" function is only available in the "bundle.js" script context. “require”函数仅在“bundle.js”脚本上下文中可用。 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. Browserify 将获取所有必需的脚本文件并将它们放入“bundle.js”文件中，因此您只需要在 HTML 文件中包含“bundle.js”，而不是“script.js”文件。
解决方案2
15 2015-08-18 21:30:06
I personally prefer to keep my library code and application code seperate.我个人更喜欢将我的库代码和应用程序代码分开。 So i also create something like a bundle.js and a script.js .所以我还创建了一个bundle.js和一个script.js类的东西。
there is a simple workaround, that makes this work.有一个简单的解决方法，使这项工作。 This is somewhere in my browserify-file:这是我的浏览器文件中的某处：
window.require = require;
this will expose require into the "global" namespace.这会将require暴露到“全局”命名空间中。 You can then require all you want from your script.js .然后，您可以从您的script.js您想要的所有内容。
You do give up ONE advantage, though: you'll have to include all the required libraries in your browserify file.但是，您确实放弃了一个优势：您必须在 browserify 文件中包含所有必需的库。 You don't get the luxury of it finding all your dependencies, then!那么，您不会有幸找到所有依赖项！
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.有时，一个全局变量可以使一切变得不同。
解决方案3
11 2017-01-05 03:21:42
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.Bundle in bundle.js .之后你应该在window.Bundle中有bundle.js 。
So at that point you should be able to access from script.js .所以此时你应该能够从script.js访问。
if you are using grunt如果你使用 grunt
If you are using grunt install grunt-browserify .如果您使用grunt安装grunt-browserify 。
npm install grunt-browserify --save-dev
And then on grunt.js Gruntfile:然后在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"]
}
}
},
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 here for Chart.js gulp file.有关 Chart.js gulp 文件，请参见此处。
if you are using babel如果你使用 babel
If you are using babel and es6 probably you are exporting your Bundle class.如果您正在使用 babel 和es6您可能正在导出您的Bundle类。
// you should have something like that
class Bundle {
...
}
export default Bundle;
So because of babel now to use Bundle you should use Bundle.default and so:所以因为 babel 现在要使用Bundle你应该使用Bundle.default等等：
// in script.js
var bundle = new Bundle.default();
To avoid this syntax you can override Bundle with Bundle.default .为了避免这种语法，您可以使用Bundle.default覆盖Bundle 。
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来源
解决方案4
9 2015-02-24 13:11:08
Short answer : remove the script.js import简短回答：删除 script.js 导入
Longer answer : You are getting the error because the method require is not defined in the browser.更长的答案：您收到错误是因为浏览器中未定义方法require 。 You shouldn't include script.js .你不应该包含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 背后的想法是您可以使用 CommonJS 模块拆分源并将它们捆绑到一个文件中以在浏览器中使用。 Browserify will traverse all your sources and will concatenate all require d files into the bundle. Browserify 将遍历您的所有源并将所有require文件连接到包中。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.