如何使用 webpack 在 js 文件中加载 CDN 或外部供应商 javascript lib，而不是在 html 文件中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33250174/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to use webpack to load CDN or external vendor javascript lib in js file, not in html file
提问by jay.m
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?
我正在使用 React 入门套件进行客户端编程。它使用 react 和 webpack。没有要编辑的 index.html 或任何 html，都是 js 文件。我的问题是，如果我想从云加载供应商 js 库，我该怎么做？
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>
在 html 文件中很容易做到这一点。 <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
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.
但是，在 js 文件中，它只使用 npm 安装的包。如何在没有 html 文件的情况下导入上述库？我试过导入和要求，它们只适用于本地文件。
update 10/21/15 So far I tried two directions, neither is ideal.
2015 年 10 月 21 日更新 到目前为止，我尝试了两个方向，但都不理想。
- @minheq yes there is a html file sort of for react start kit. It is html.js under src/components/Html. I can put cloud lib and all its dependencies there like this:
- @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>
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.
好消息是它有效，我不需要在 js 文件中做任何其他事情，不需要导入或要求。但是，现在我有两个以不同方式加载的 jquery 库。一个在这里，另一个通过 npm 和 webpack。我不知道它以后会给我带来麻烦。如果我猜由于服务器端加载而在浏览器窗口中键入无主路径，我使用的反应路由会给我“未定义变量”错误。所以这个解决方案不是很好。
- 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.
- 使用 webpack 外部特性。这被记录为：链接。“当您想将现有 API 导入捆绑包时，您也可以为应用程序使用外部选项。即您想使用来自 CDN（单独标签）的 jquery，并且仍然希望在您的捆绑包中使用 require("jquery")。只是将其指定为外部：{ externals: { jquery: "jQuery" } }。" 但是，我在几个地方找到的文档都对如何准确地做到这一点很挑剔。到目前为止，我不知道如何使用它来替换
<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>html。
采纳答案by minheq
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
有一个 html 文件肯定用于为附加了 js 包的用户提供服务。也许您可以将脚本标签附加到该 html 文件中
回答by Tom Chen
externalsis not intended to let you do this. It means "don't compile this resource into the final bundle because I will include it myself"
externals不是为了让你这样做。这意味着“不要将此资源编译到最终包中，因为我会自己包含它”
What you need is a script loader implementation such as script.js. I also wrote a simple app to compare different script loader implementations: link.
你需要的是一个脚本加载器实现，比如script.js。我还编写了一个简单的应用程序来比较不同的脚本加载器实现：link。
回答by Johnny
var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
$('body').html('It works!')
});
回答by Hyman Spektor
You can create a script tag in your JS as
你可以在你的 JS 中创建一个脚本标签作为
$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))
回答by Griffith
Use webpack's externals:
使用 webpack 的externals：
externalsallows 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.
externals允许您为库指定 webpack 未解析的依赖项，但成为输出的依赖项。这意味着它们是在运行时从环境中导入的。
