如何使用 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 入门套件进行客户端编程.它使用 react 和 webpack.没有 index.html 或任何要编辑的 html，都是 js 文件.我的问题是，如果我想从云端加载供应商 js 库，我该怎么做?

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 文件的情况下导入上述库?我试过 import 和 require，它们只适用于本地文件.

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目前尝试了两个方向，都不理想.

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

1. @minheq 是的，有一个 html 文件用于 react start kit.它是 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.我不知道它以后会给我带来麻烦.如果我猜由于服务器端加载而在浏览器窗口中键入无主路径，我使用的反应路由会给我未定义变量"错误.所以这个方案不是很好.

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 外部功能.这被记录为:链接.当您想将现有 API 导入捆绑包时，您也可以为应用程序使用外部选项.即，您想使用来自 CDN(单独标签)的 jquery，并且仍然希望在您的捆绑包中使用 require("jquery").只是将其指定为外部:{ externals: { jquery: "jQuery" } }."但是，我在几个地方找到的文档都对如何准确地做到这一点很挑剔.到目前为止，我不知道如何使用它来替换 <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"><</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屋！