Kin*_*ien 30 javascript node.js browserify
我是浏览器并尝试在浏览器中加载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');
小智 37
"require"函数仅在"bundle.js"脚本上下文中可用.Browserify将获取所有必需的脚本文件并将它们放入"bundle.js"文件中,因此您只需在HTML文件中包含"bundle.js",而不是"script.js"文件.
ame*_*hes 14
我个人更喜欢将我的库代码和应用程序代码分开.所以我也创造了类似a bundle.js和a的东西script.js.
有一个简单的解决方法,这使得这项工作.这是我的browserify文件中的某个地方:
window.require = require;
这将暴露require到"全局"命名空间.然后,您可以要求您提供所需的一切script.js.
但是,您确实放弃了一个优势:您必须在browserify文件中包含所有必需的库.那么你找不到所有的依赖关系就无法获得它的奢侈!
我完全希望人们哭泣"肮脏的黑客"或"这不是它的意思".也许吧.但我希望这些文件分开.只要我不包含任何其他被称为"要求"的东西,我会没事的,非常感谢你.
有时一个全球可以发挥重要作用.
简短回答:删除script.js导入
更长的答案:您收到错误,因为该方法require未在浏览器中定义.你不应该包括script.js.
Browserify背后的想法是,您可以使用CommonJS模块拆分源,并将它们捆绑到一个文件中,以便在浏览器中使用.Browserify将遍历所有源,并将所有required文件连接到捆绑包中.
似乎要运行这样的脚本,你必须在bundle上使用standalone.
browserify main.js --standalone Bundle > bundle.js
之后你应该window.Bundle进去bundle.js.
所以在那时你应该可以访问script.js.
如果您正在使用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"]
}
}
},
// on your build task
var bundled = browserify('main.js', { standalone: 'Bundle' })
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest(outDir));
见这里的chart.js之一饮而尽文件.
如果您正在使用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();