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

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？我尝试导入和require,它们只适用于本地文件.

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

1. @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给出了'未定义变量'错误.所以这个解决方案不是很好.

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

Answer 1

externals不是为了让你这样做.这意味着"不要将此资源编译到最终的包中,因为我将自己包含它"

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

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

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