Question

我正在使用react starter kit进行客户端编程。它使用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文件的情况下导入上面的lib？我尝试了import和require，它们只适用于本地文件。

更新10/21/15 到目前为止，我尝试了两个方向，既不理想。

@minheq是的，有一个反应启动工具包的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-routing给出了'未定义变量'错误。所以这个解决方案不是很好。

使用webpack外部功能。记录为：link。 “当你想将现有的API导入到捆绑包中时，你也可以使用外部的选项。你想在CDN中使用jquery（单独的标签），但仍然想在你的捆绑包中要求（”jquery“）。将其指定为external：{externals：{jquery：“jQuery”}}。“ 但是，我发现一些地方的文档都非常挑剔如何准确地做到这一点。到目前为止，我不知道如何使用它来替换html中的<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>。

Answer 1

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

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

Answer 2

var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
  $('body').html('It works!')
});

Answer 3

您可以在JS中创建一个脚本标记

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

Answer 4

使用webpack的externals：

externals允许您指定库的依赖项不是由webpack解决，而是成为输出的依赖。这个表示它们是在运行时从环境中导入的。

Answer 5

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

Answer 6

我一直在寻找解决方案，并且大多数建议都基于外部因素，这对我而言无效。

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

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

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

6 个答案: