Browserify npm 库答案

【问题标题】：Browserify npm libraryBrowserify npm 库
【发布时间】：2019-06-07 21:56:24
【问题描述】：

我有一个经过良好测试的 npm 库 (https://www.npmjs.com/package/yuml-diagram)，我想对其进行 Browserify，以便在浏览器应用程序中使用它。

完整的源代码在这里：https://github.com/jaime-olivares/yuml-diagram

我设法使用以下命令行将该库构建为一个整体包：
browserify index.js -g uglifyify -o ./dist/yuml-diagram.min.js

然后我尝试以与在 Node-JS 中类似的方式使用它，正如在几个地方所建议的那样：

<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>

require() 函数无法识别，即使我在 Browserify 中使用标志 --exports require。

如何从应用程序脚本调用库的processYumlDocument() 函数？

【问题讨论】：

标签： javascript node.js npm browserify node-modules

【解决方案1】：

Browserify 不会在您的页面上添加对 require 的支持。 Browserify 用于内部使用解析的 javascript 文件，并生成静态包含解析的版本。

在您的示例中，您应该将脚本块的内容移动到 javascript 文件中，然后对该文件执行 browserify。然后将最终生成的文件包含在您的页面中。

【讨论】：

认为这是一个库。应用程序和库是分离的实体。我不控制应用程序的构建方式（直接 javascript、打字稿等）以及它有多大。我需要的是找到调用 processYumlDocument() 的入口点。
除非您是 A，否则您不能在网页内使用模块。在网页内使用能够加载您的模块的模块加载器。 B. 库在加载时自行注册到窗口对象（这是一种可怕的行为，但可以在个人项目中工作）。
那么'A'是如何实现的呢？
这取决于你如何使用模块。如果您是 browserify 用户，您可以在 javascript 文件中编写代码并使用 browserify 对其进行预处理，然后在您的页面上提供完整的包。
我的意思是，来自上面示例中的常规 javascript 应用程序。我怎样才能到达 processYumlDocument() 函数，要么在 html/js 中做一些事情，要么通过改进浏览器库的生成。

【解决方案2】：

找到我自己的答案。 Browserify中需要standalone参数，如下：

browserify index.js --standalone yuml_diagram -g uglifyify -o ./dist/yuml-diagram.min.js

yuml_diagram 代表整个捆绑包。然后该库可以通过几行来使用：

<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>

【讨论】：