不破坏捆绑包时浏览器中的“找不到模块”答案

【问题标题】："Cannot find module" in browserify when not mangling the bundle不破坏捆绑包时浏览器中的“找不到模块”
【发布时间】：2019-07-31 22:12:21
【问题描述】：

我有一个正在尝试使用 Browserify 构建的自定义库。该库使用fabric.js，使用一些自定义类对其进行扩展，并将其全局公开以在浏览器和 node.js 中使用。这是库的主要入口点：

(function () {
    "use strict";

    // Make fabric global in browsers and node
    this.fabric = require('./libs/fabric.canvasex.js');
    this.fabric.internal_version = "1.0.0";

    require('./libs/BoundedText/BoundedText.js');
    require('./libs/BoundedText/PathText/PathIText.js');
    require('./libs/VectorPlaceholder/fabricVectorPlaceholder.js');
    require('./libs/ImagePlaceholder/fabricImagePlaceholder.js');

}).call(this);

这个库的文件结构是这样的：

要将此库构建为单个文件，我使用以下命令：

browserify --full-paths js/main.js | uglifyjs --compress --mangle safari10 > dist/my-lib.js

这很好用，我可以在浏览器中包含它并在 node.js 中需要它，它也成为一个全局变量，这正是我所需要的。当我必须调试某些东西并且缩小的代码显然不适合这个时，问题就开始了，所以我将库像这样捆绑：

browserify --full-paths js/main.js > dist/my-lib.js

现在，当我尝试使用 browserify 将此构建包含在另一个节点程序中时，如下所示：

require('./customily-fabric.js');

将我的程序与库捆绑时出现以下错误：

[1] Error: Cannot find module '../fabric.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module './OpentypeIText.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'      
[1] Error: Cannot find module './startsWith-polyfill.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module './Font.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module '../../fabric.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module './ctxtextpath.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'        
[1] Error: Cannot find module './path-properties.min.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module '../potrace.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module './fabricMaskFilter.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'   
[1] Error: Cannot find module './fabric.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module './libs/BoundedText/BoundedText.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module './libs/BoundedText/PathText/PathIText.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module './libs/VectorPlaceholder/fabricVectorPlaceholder.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module './libs/ImagePlaceholder/fabricImagePlaceholder.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module './libs/fabric.canvasex.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'

我发现，如果我从库构建中仅删除 --mangle 选项，则在尝试将其包含在另一个节点程序中时会出现这些错误。为什么会这样？不应该所有模块都包含在包中吗？

【问题讨论】：

Mangleing 更改变量名称和键。因此，如果您的应用程序构建的一部分被破坏，而另一个却没有但依赖于它，您就不能期望模块的名称相同。如果您想调试，您应该使用调试设置重新构建您的完整应用程序。
我包含库的程序没有被破坏，如果我破坏它，我会得到同样的错误，所以问题是当库没有被破坏时，程序是否无关紧要我在哪里包括它是否被破坏，无论如何我都会收到错误。

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

【解决方案1】：

经过一番搜索，我终于找到了原因，使用browserify时无法添加与browserify捆绑的库，请参阅this问题。

此功能在 browserify 17 中提供，所以现在我切换到 webpack 来构建我的库。

【讨论】：