我正在使用React Starter Kit进行客户端编程。它使用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文件的上述lib?我尝试导入并要求,它们仅适用于本地文件。
更新10/21/15到目前为止,我尝试了两个方向,但都不是理想的选择。
- @minheq是的,有一个用于react入门工具包的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。我不知道以后会不会给我带来麻烦。如果我由于服务器端负载而在浏览器窗口中键入无主路径,则我使用的反应路由会给我“未定义的变量”错误。所以这个解决方案不是很好。
- 使用webpack外部功能。记录为:link。“当您想将现有的API导入捆绑软件时,也可以对应用程序使用外部选项。即,您想使用CDN中的jquery(单独的标签),仍然希望在捆绑软件中使用require(“ jquery”)。将其指定为外部:{外部:{jquery:“ jQuery”}}。“ 但是,我发现一些地方的文档对于如何准确地做到这一点都很挑剔。到目前为止,我还不知道如何使用它来替换
<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
html。
externals
不打算让您这样做。这意味着“不要将这个资源编译到最终的捆绑包中,因为我会自己将其包括在内”您需要的是脚本加载器实现,例如script.js。我还编写了一个简单的应用程序来比较不同的脚本加载器实现:link。