I'm trying to make simple page with JS module that will do something with the page. I need to use node.js's modules so I'm learning how to browserify works.
My HTML:
<!doctype html>
<html>
<head>
<script src="js/bundle.js" type="text/javascript"></script>
</head>
<body>
<p>Hello world!</p>
<script type="text/javascript">
var test = require("./test.js");
test.init();
</script>
</body>
</html>
This is my JavaScript (test.js):
"use strict";
alert("here1");
var init = function() {
alert("here2");
}
exports.init = init
I'm making a bundle with:
browserify.cmd test.js -o bundle.js
When I'm trying to open the page it shows "here1" but doesn't show "here2". In browser's console I see:
Uncaught ReferenceError: require is not defined index.html:9
Any ideas how to make module's function (init) work well?
I'm trying to make simple page with JS module that will do something with the page. I need to use node.js's modules so I'm learning how to browserify works.
My HTML:
<!doctype html>
<html>
<head>
<script src="js/bundle.js" type="text/javascript"></script>
</head>
<body>
<p>Hello world!</p>
<script type="text/javascript">
var test = require("./test.js");
test.init();
</script>
</body>
</html>
This is my JavaScript (test.js):
"use strict";
alert("here1");
var init = function() {
alert("here2");
}
exports.init = init
I'm making a bundle with:
browserify.cmd test.js -o bundle.js
When I'm trying to open the page it shows "here1" but doesn't show "here2". In browser's console I see:
Uncaught ReferenceError: require is not defined index.html:9
Any ideas how to make module's function (init) work well?
Share Improve this question asked Apr 8, 2016 at 22:35 valkervalker 1431 gold badge2 silver badges16 bronze badges 2- because require is not a native js function, it should be used in your test.js as that is what browserify uses to bundle your modules – ronster37 Commented Apr 8, 2016 at 23:05
- But how I can have access to the function defined in test.js from the html/embedded js? – valker Commented Apr 8, 2016 at 23:11
2 Answers
Reset to default 8You need to put all JavaScript code which contains anything from Node in the test.js file which you are then converting with the browserify into te bundle.js. In your example you are using a Node function require in the index.html which is not going to be converted. Browser then sees function require() which he doesn't know and this is where the problem is hidden.
Simply told: all your javascript code (containing Node) must be included in your index.html as a single bundle.js which is a browserifed result from your source files.
EDIT
Browserify doesn't (by default) allow you to call any browserified function out of the browserified code. But you can make it available by attaching the function into window scope.
This is test.js (which is then converted to bundle.js by browserify) and index.html
"use strict";
alert("here1");
window.init = function() {
alert("here2");
}<!doctype html>
<html>
<head>
<script src="js/bundle.js" type="text/javascript"></script>
</head>
<body>
<p>Hello world!</p>
<script type="text/javascript">
init();
</script>
</body>
</html>This is the top goog hit for "browserify cannot access", and I just wasted at least a couple hours not-getting-it myself. Perhaps other posts and blogs and tutorials are obtuse, or maybe it's just me, but here's an example I wish someone had shown me:
const trie = require('trie') <---you want to use this module like in node
Run this (after installing browserify):
browserify -r trie -s trie > trie.browser.js (if node can find it, browserify should)
-r = --require [module name]
-s = --standalone [globally-scoped(!) var name for module in browser JS env.]
(you can also use the -o for --output option instead of redirecting with >)
Then in you browser code you can do:
const LexTrie = new trie.Trie()
...or...
const LexTrie = trie.createTrieFromJson(lexicon_trie_json)
This beats making an intermediary text file with a require, which wasn't working for me to get the module to the global scope until I did something like:
window.trie = require('trie')
...at which point it worked, but I knew there had to be a simpler way.
Hope this helps some dense person like me in the future when they don't get the browserify docs because they don't highlight the --standalone option....
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745394771a4625827.html
评论列表（0条）