Browserify npm library
Question
I have a well tested npm library ( https://www.npmjs.com/package/yuml-diagram ) that I would like to Browserify so it can be used in browser applications.
The full source code is here: https://github.com/jaime-olivares/yuml-diagram
I managed to build the library as a monolithic package with the following command line:
browserify index.js -g uglifyify -o ./dist/yuml-diagram.min.js
Then I tried to use it in a similar fashion as in Node-JS, as suggested in several places:
<html>
<head>
<script src="https://gist.githubusercontent.com/jaime-olivares/5cd18b40f2bdcf5e403ed78d181c3d85/raw/00f5624fe30500a22144962184e927236f1ac45f/yuml-diagram.min.js"></script>
<script>
function loadSvg()
{
var yuml_diagram = require('yuml-diagram');
var yumlText =
`// {type:sequence}
[:Computer]async test>>[:Server]
[:Computer]sync test>[:Server]`;
var yuml = new yuml_diagram();
var svg = yuml.processYumlDocument(yumlText, false);
document.body.innerHTML = svg;
}
</script>
</head>
<body onload="loadSvg();">
</body>
</html>
The require() function is not recognized, even if I use the flag --exports require in Browserify.
How can I invoke the library's processYumlDocument() function from the application script?
2 answers
solution1
0 2019-06-07 22:06:42
Browserify does not add support for require onto your page. Browserify is used on a javascript file that is using resolve internally and produces a version with the resolves statically included.
In your example you should move the content of your script block into a javascript file and then execute browserify on that file. Then include the final produced file in your page.
solution2
0 2019-06-07 23:51:16
Found my own answer. It is required the standalone parameter in Browserify, as here:
browserify index.js --standalone yuml_diagram -g uglifyify -o ./dist/yuml-diagram.min.js
Where yuml_diagram represents the whole bundle. Then the library can be used with a couple of lines:
<html>
<head>
<script src="../dist/yuml-diagram.min.js"></script>
<script>
function loadSvg()
{
var yumlText =
`// {type:sequence}
[:Computer]async test>>[:Server]
[:Computer]sync test>[:Server]`;
// Create the object and invoke a function inside it
var yuml = new yuml_diagram();
var svg = yuml.processYumlDocument(yumlText, false);
document.body.innerHTML = svg;
}
</script>
</head>
<body onload="loadSvg();">
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.