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

IT技术 javascript node.js reactjs webpack
2021-04-16 13:05:02

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

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

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

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

  1. @minheq 是的，有一种用于react启动套件的 html 文件。它是 src/components/Html 下的 html.js。我可以像这样将 cloud lib 及其所有依赖项放在那里：
        <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。我不知道它以后会给我带来麻烦。如果我猜由于服务器端加载而在浏览器窗口中键入无主路径，我使用的react路由会给我“未定义变量”错误。所以这个解决方案不是很好。

  1. 使用 webpack 外部特性。这被记录为：链接。“当您想将现有 API 导入捆绑包时，您也可以为应用程序使用外部选项。即，您想使用来自 CDN（单独标签）的 jquery，并且仍然希望在您的捆绑包中使用 require("jquery")。只是将其指定为外部：{ externals: { jquery: "jQuery" } }." 但是，我在几个地方找到的文档都对如何准确地做到这一点很挑剔。到目前为止，我不知道如何使用它来替换<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>html。
6个回答

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

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

确实如此，该externals属性只是让您指定应在运行时从环境中导入的资源。您将如何在运行时提供外部资源取决于您，而不是 webpack。
2021-06-15 13:05:02 
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
2021-05-27 13:05:02
更现代的选项是使用loadjs或require-http。
2021-06-01 13:05:02

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

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

使用 webpack 的externals：

externals允许您为库指定 webpack 未解析的依赖项，但成为输出的依赖项。这意味着它们是在运行时从环境中导入的。

您能否详细说明一下，例如在哪里添加外部组件？链接到一个例子会很棒！
2021-06-20 13:05:02
我没用过，但看起来像这个webpack.js.org/configuration/externals/#externals
2021-06-21 13:05:02

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

其它你可能感兴趣的问题
上一篇在 React 状态下使用 Set 数据结构 下一篇为什么 Redux 中的对象应该是不可变的？