如何为已经模块化的库构建独立的外部依赖js文件？

基本上我有许多遗留的Web应用程序引用和使用来自CDN的库（Kendo UI）。我有一个任务是将这些请求移除到远程主机，因此我想将库合并到现有的npm脚本任务中，该任务将所有依赖关系收集到应用程序引用的单个本地js文件中。如何为已经模块化的库构建独立的外部依赖js文件？

时遇到的问题是，this library不提供可立即使用（不像其它的库如jQuery或角度）预编译的JS文件，但它是模块化的，并且需要的WebPack或browserify使用它。

由于我们的遗留应用程序不使用模块化方法来加载依赖关系，而且我也没有范围来重写它们，所以我想以某种方式将模块化库打包到等效的js文件中，以便加载库，以便我的应用程序可以只需通过<script>即可访问它。

我一直在使用browserify从包含一个简单的require参考库，但随后引用在我的申请结果的编译文件中的错误作为图书馆的功能不可用我的应用程序源js文件编译尝试。

任何人都可以指向正确的方向吗？

来源

2017-09-26 Rich Browne

你在正确的轨道使用webpack，你只需要暴露图书馆的。如果这个lib纯粹是基于模块的，你将不得不自己创建一个全局名称，例如。 jQuery为你的Kendo UI做了jQuery＆$，也许你可以将它暴露给全局的kendoUI等。 – Keith

谢谢Keith。我不确定这是否只是kendo的一些怪癖，但似乎全局变量'kendo'是由我上面提到的browserify编译文件设置的，但是jQuery扩展函数（例如'$（...）.kendoDropDownList （）'）全局不可用（它们在我用browserify编译的js文件中可用）。有任何想法吗？ –

是的，你很可能有jQuery作为kendu UI内的依赖关系。默认情况下，你会得到2个版本的jQuery。你在这里做的是安装webpack，以便jQuery是外部的。在你的webpack配置里面，把'externals：{jquery：“jQuery”} ,.注意小写的jquery，通常在节点中我们保持require的小写，但如果Kendu UI确实需要（'jQuery'），则需要修改。 – Keith

如果你使用一些基于模块的库，并且你想单独使用它们，你需要做2件事情。

模块暴露在全球范围内。也许使用Expos loader https://github.com/webpack-contrib/expose-loader或甚至只是分配给窗口对象。
如果模块也在使用您也包括独立的库，那么您需要告诉webpack关于这些的信息。

例如，

{ 
    externals: { 
    jquery: 'jQuery' 
    } 
    // other stuff.. 
}

最后，当您包含这些内容时，请记住脚本标记的排序。例如。确保你在绑定的javascript之前包含jquery。

来源

2017-09-26 10:53:05 Keith

伟大的东西，谢谢基思。 –

如何为已经模块化的库构建独立的外部依赖js文件？

回答

相关问题