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

Question

我正在使用 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 文件的情况下导入上述库？我尝试了 import 和 require，它们只适用于本地文件。

15 年 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。不知道以后会不会给我添麻烦。如果我在浏览器 window 中键入 none 主路径，我使用的反应路由会给我 'undefined variable' 错误，我猜是由于服务器端加载。所以这个解决方案不是很好

使用 webpack 外部功能。这记录为：link。 "You can use the externals options for applications too, when you want to import an existing API into the bundle. I.e. you want to use jquery from CDN (separate tag) and still want to require("jquery") 在你的包中。只需将其指定为外部：{ externals: { jquery: "jQuery" } }." 然而，我在一些地方找到的文档对如何准确地做到这一点都很挑剔。到目前为止，我不知道如何使用它来替换 html.

<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>

Answer 1

使用webpack的externals:

externals allows you to specify dependencies for your library that are not resolved by webpack, but become dependencies of the output. This means they are imported from the environment during runtime.

Answer 2

您可以在 JS 中创建一个脚本标签，如

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

Answer 3

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

Answer 4

externals 不是为了让你这样做。意思是"don't compile this resource into the final bundle because I will include it myself"

您需要的是脚本加载器实现，例如script.js. I also wrote a simple app to compare different script loader implementations: link。

Answer 5

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

Answer 6

我四处寻找解决方案，大多数建议都是基于外部的，这对我来说是无效的。

在另一个 post 中，我 post 编辑了我的解决方案：

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

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

how to use webpack to load CDN or external vendor javascript lib in js file, not in html file

javascript

node.js

reactjs

webpack