如何使用 webpack 在 js 文件中加载 CDN 或外部供应商 javascript lib,而不是在 html 文件中

Posted

技术标签:

【中文标题】如何使用 webpack 在 js 文件中加载 CDN 或外部供应商 javascript lib,而不是在 html 文件中【英文标题】:how to use webpack to load CDN or external vendor javascript lib in js file, not in html file 【发布时间】:2016-01-19 21:51:35 【问题描述】:

我正在使用 react 入门套件进行客户端编程。它使用 react 和 webpack。没有 index.html 或任何要编辑的 html,所有 js 文件。我的问题是,如果我想从云端加载供应商 js lib,我该怎么做?

在 html 文件中很容易做到这一点。 <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>

但是,在 js 文件中,它只使用 npm 安装的包。如何在没有 html 文件的情况下导入上述库?我试过 import 和 require,它们只适用于本地文件。

2015 年 10 月 21 日更新 到目前为止,我尝试了两个方向,都不理想。

    @minheq 是的,有一个用于反应启动套件的 html 文件。它是 src/components/Html 下的 html.js。我可以像这样将云库及其所有依赖项放在那里:
        <div id="app" dangerouslySetInnerHTML=__html: this.props.body />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
        <script src="/app.js"></script>
        <script dangerouslySetInnerHTML=this.trackingCode() />
    </body>

好消息是它有效,我不需要在 js 文件中做任何其他事情,不需要导入或要求。但是,现在我有两个以不同方式加载的 jquery 库。一个在这里,另一个通过 npm 和 webpack。我不知道它以后会给我带来麻烦。如果由于服务器端加载而在浏览器窗口中键入无主路径,我使用的反应路由会给我“未定义的变量”错误。所以这个解决方案不是很好。

    使用 webpack 外部功能。这记录为:link。 “当您想将现有 API 导入捆绑包时,您也可以为应用程序使用外部选项。即,您想从 CDN(单独的标签)使用 jquery,但仍想在捆绑包中使用(“jquery”)。只是将其指定为外部: externals: jquery: "jQuery" 。" 但是,我在几个地方找到的文档都对如何准确地做到这一点很挑剔。到目前为止,我不知道如何使用它来替换 html 中的&lt;script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"&gt;&lt;/script&gt;

【问题讨论】:

你想require('jquery'),外部'jquery': 'jQuery'npm install jquery --save,并让webpack在你的html中写入&lt;script src="https://code.jquery.com/jquery-2.2.4.min.js" /&gt;(当前最新版本)而不是在包中包含所有35kb? How to use a library from a CDN in a Webpack project in production的可能重复 【参考方案1】:

externals 不打算让您这样做。这意味着“不要将此资源编译到最终包中,因为我会自己包含它”

您需要的是一个脚本加载器实现,例如script.js。我还编写了一个简单的应用程序来比较不同的脚本加载器实现:link。

【讨论】:

这是真的,externals 属性只是让您指定应该在运行时从环境中导入的资源。如何在运行时提供外部资源取决于您,而不是 webpack。【参考方案2】:
var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() 
  $('body').html('It works!')
);

【讨论】:

我给这个 +1 是因为 Webpack 的创建者之一在这里有相同的答案:github.com/webpack/webpack/issues/240#issuecomment-40686135 更多现代选项使用loadjs 或require-http。【参考方案3】:

你可以在你的JS中创建一个脚本标签

$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))

【讨论】:

【参考方案4】:

有一个 html 文件肯定是用来为附加了 js 包的用户提供服务的。可能您可以将脚本标记附加到该 html 文件中

【讨论】:

【参考方案5】:

使用 webpack 的externals:

externals 允许您为您的库指定依赖项 没有被 webpack 解析,而是成为输出的依赖。这 表示它们是在运行时从环境中导入的。

【讨论】:

您能否详细说明一下,例如在哪里添加外部组件?链接到一个例子会很棒! 我没用过,但看起来像这样webpack.js.org/configuration/externals/#externals【参考方案6】:

我四处寻找解决方案,但大多数提案都是基于外部的,这在我的情况下无效。

在另一篇文章中,我发布了我的解决方案:https://***.com/a/62603539/8650621

换句话说,我使用了一个单独的 JS 文件,它负责将所需的文件下载到本地目录中。然后 WebPack 扫描该目录并将下载的文件与应用程序捆绑在一起。

【讨论】:

以上是关于如何使用 webpack 在 js 文件中加载 CDN 或外部供应商 javascript lib,而不是在 html 文件中的主要内容,如果未能解决你的问题,请参考以下文章

在 Vue.js 2 组件中加载时未定义 Webpack 外部 JS 文件

如何在 Vue2 的 webpack 中加载 signalr.js

在 Webpack 中加载静态 JSON 文件

如何在 webpack 中加载 sass 样式表中使用的图像?

如何在 webpack 中加载 CSS 的根路径

如何在 vuejs 和 webpack 中加载字体文件?