我正在使用 React 入门套件进行客户端编程。它使用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,它们仅适用于本地文件。
更新 10/21/15 到目前为止我尝试了两个方向,但都不理想。
<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。不知道以后会不会给我带来麻烦。如果我由于服务器端加载而在浏览器窗口中键入无主路径,我使用的反应路由会给我“未定义的变量”错误。所以这个解决方案不太好。
<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
。var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
$('body').html('It works!')
});
您可以在 JS 中创建一个脚本标签作为
$("body").append($('<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>'))
有一个 html 文件肯定是用来为附加了 js 包的用户提供服务的。也许你可以将脚本标签附加到该 html 文件中
使用 webpack 的 externals:
允许您指定库的依赖项 不被 webpack 解析,但成为输出的依赖项。这 意味着它们是在运行时从环境中导入的。externals
我四处寻找解决方案,大多数建议都是基于外部的,这对我来说是无效的。
在另一篇文章中,我发布了我的解决方案:https://stackoverflow.com/a/62603539/8650621
换句话说,我完成了使用一个单独的JS文件,它负责将所需的文件下载到本地目录中。然后 WebPack 扫描该目录并将下载的文件与应用程序捆绑在一起。