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

Question

我正在使用 react 入门套件进行客户端编程。它使用 react 和 webpack。没有 index.html 或任何要编辑的 html，所有 js 文件。我的问题是，如果我想从云端加载 vendor 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 日更新到目前为止，我尝试了两个方向，都不理想。

1. @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。我不知道它以后会给我带来麻烦。如果由于服务器端加载而在浏览器窗口中键入无主路径，我使用的 react 路由会给我“ undefined variable ”错误。所以这个解决方案不是很好。

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

Answer 1

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

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