假设我有这个simple.js
文件:
function Square(x)
{
return x * x;
}
function Cube(x)
{
return x * x * x;
}
请注意,这段代码本身并没有做任何事情,它只是定义了这两个简单的函数。
现在我想browserify
这个文件,所以我得到了一个.js文件,我可以将其包含在一个普通的HTML文件中,然后使用其中的Square
和Cube
函数。
我的问题是我不明白module.exports
或exports
是如何工作的,也不明白它到底应该代表或包含什么。
我的目标是能够在example.html
文件中做到这一点:
<!DOCTYPE html><html><head><meta charset='utf-8'>
<script src='myfunctions.js'></script>
<script>
var x = Square(3);
var y = Cube(5);
</script>
</head><body></body></html>
但是,如果我执行browserify simple.js > myfunctions.js
,那么上面的脚本显然不起作用,Square
和Cube
函数没有定义。
我知道我必须以某种方式导出这些函数,但我不知道如何导出,也不知道如何在HTML脚本中处理它们。
我想我必须做这样的事情:
<!DOCTYPE html><html><head><meta charset='utf-8'>
<script src='myfunctions.js'></script>
<script>
const myFuncs = ...???... // not sure what this should be?!
var x = myFuncs.Square(3);
var y = myFuncs.Cube(5);
</script>
</head><body></body></html>
我还尝试在browserify
行中使用--s SomeSymbolName
,但我无法使其工作。
正确的方法是什么?
经过一番折腾后发现了它,我将这一行添加到simple.js
:
module.exports = { 'Square':Square, 'Cube':Cube };
然后我使用browserify
和一个独立的符号,比如
browserify simple.js --standalone myFuncs > myfunctions.js
现在我可以在HTML文件中包含myfunctions.js
,并使用JavaScript中的函数,如下所示:
var x = myFuncs.Square(3);
var y = myFuncs.Cube(5);