对于自定义库，如何使依赖项对宿主应用程序不可见？答案

【问题标题】：For a custom library, how can I make dependancies invisible to the host application?对于自定义库，如何使依赖项对宿主应用程序不可见？
【发布时间】：2017-01-25 21:30:29
【问题描述】：

我正在创建一个使用第三方库（如 JQuery、RequireJS 等）的自定义 javascript 库。在我的特定情况下，它是 Dojo。

用户使用我的库所要做的就是像大多数其他库一样添加一个脚本标签。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Host Application</title>
</head>
<body>
    <div>Host Application</div>
    <script src="~/Scripts/myLibrary/myLibrary.js"></script>
</body>
</html>

在我的库首次加载时，我正在考虑动态加载第三方依赖项 (Dojo)，如这些链接中所述

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml https://www.sitepoint.com/dynamically-load-jquery-library-javascript/

function loadjscssfile(filename, filetype){
    if (filetype=="js"){ //if filename is a external JavaScript file
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype=="css"){ //if filename is an external CSS file
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)
}

但是，由于用户可能不知道我的库使用 Dojo，我担心他们在应用程序中包含 Dojo 的情况。所以本质上是加载两个 javascript 文件，一个用于 Dojo.js，另一个用于 myLibrary.js

...
<script src="~/Scripts/myLibrary/myLibrary.js"></script>
<script src="~/Scripts/dojo-release-1.10.6/dojo/dojo.js"></script>
...

此外，我真的不希望用户能够调用和使用依赖项，他们不应该仅仅因为 Dojo 已加载到我的库中而在宿主应用程序中使用它。

是否可以将我的自定义库依赖项与主机隔离，因此它们不会干扰主机也可能加载的类似库

编辑：（也防止主机意外地直接使用依赖项——如果可能的话。例如，通过调用两个版本上都存在的方法，但不知何故，与我的库捆绑在一起的版本被执行而不是预期的版本）？

【问题讨论】：

如果你已经在使用requirejs，它应该可以做你想要的。还有其他选项，例如webpack、rollup、browserify
@DJ。这是主机应用程序必须使用的东西吗？
通过阻止他们使用您加载的依赖项，您将获得什么？假设您没有对依赖项本身进行更改，那有什么意义呢？具体来说，如果您实际上并没有阻止任何事情，为什么还要为可能的库的双重加载而烦恼，因为任何人都可以自己加载依赖项？
@Roope 我明白你的意思，但我的主要目标是避免冲突，以防他们决定包含依赖项而不知道它捆绑在我的库中。那么冲突将是调用两者上都存在的方法，但调用的是捆绑版本而不是它们包含的方法。
我明白你在想什么，但我仍然要指出，依赖项对于任何开发人员来说都是正常生活的一部分，最佳实践只是通知他们你有一个依赖项并让他们担心实现他们拥有的所有依赖项。请注意，如果用户需要 Dojo 来做其他事情，您将强制他们为页面加载添加额外的 165kB 左右，这可以通过让他们自己加载依赖项来轻松避免。但随心所欲。

标签： javascript

【解决方案1】：

当前流行的方法是将您的依赖项与您的库捆绑，生成一个包含所有必要部分的缩小的 javascript 文件。

使用webpack（我的推荐）或browserify 之类的工具来处理您的所有 JS 文件和必要的依赖项并创建单个包。

这对捆绑包的用户没有任何要求。他只需要一个<script> 标签。

这两种工具都有丰富的文档和教程。花一些时间在谷歌上搜索和学习。很高兴知道如何使用它们。

【讨论】：