如何使用webpack在js文件中加载CDN或外部供应商javascript lib，而不是在html文件中 [英] how to use webpack to load CDN or external vendor javascript lib in js file, not in html file

问题描述

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

I am using react starter kit for client side programming. It uses react and webpack. No index.html or any html to edit, all js files. My question is if I want to load a vendor js lib from cloud, how to do I do that?

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

It would be easy to do that in a html file. <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>

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

However, in js file, it only uses npm installed packages. How can I import the above lib with no html file? I tried import and require, they only work for local files.

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

update 10/21/15 So far I tried two directions, neither is ideal.

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

Good news is it works, I don't need do anything else in js file, no import or require. However, now I have two jquery libs loaded in different ways. One in here, the other through npm and webpack. I wonder it will give me trouble later. The react-routing I use give me 'undefined variable' error if I type a none home path in browser window due to the server side loading I guess. So this solution is not very good.

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

1. Use webpack externals feature. This is documented as: 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") in your bundle. Just specify it as external: { externals: { jquery: "jQuery" } }." However, the documentation I found a few places are all fussy about how to do this exactly. So far I have no idea how to use it to replace <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script> in html.

推荐答案

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

There is one html file that is definitely being used to serve to users with your js bundle attached. Probably you could attach the script tag into that html file

这篇关于如何使用webpack在js文件中加载CDN或外部供应商javascript lib，而不是在html文件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！