如何使用Webpack在js文件而不是html文件中加载CDN或外部供应商javascript lib

JavaScript Webpack

逆天小哥蛋蛋

2020-03-24

我正在使用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到目前为止,我尝试了两个方向,但都不是理想的选择。

  1. @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。我不知道以后会不会给我带来麻烦。如果我由于服务器端负载而在浏览器窗口中键入无主路径,则我使用的反应路由会给我“未定义的变量”错误。所以这个解决方案不是很好。

  1. 使用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。

第3555篇《如何使用Webpack在js文件而不是html文件中加载CDN或外部供应商javascript lib》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
古一十三 2020.03.24

externals不打算让您这样做。这意味着“不要将这个资源编译到最终的捆绑包中,因为我会自己将其包括在内”

您需要的是脚本加载器实现,例如script.js我还编写了一个简单的应用程序来比较不同的脚本加载器实现:link

猪猪 2020.03.24

使用webpack的外部组件

externals允许您为库指定依赖项,这些依赖项不会被webpack解析,而是成为输出的依赖项。这意味着它们是在运行时从环境中导入的。

宝儿理查德 2020.03.24

您可以在JS中创建脚本标签,如下所示:

$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))
宝儿理查德 2020.03.24

肯定有一个html文件可用于附加了js捆绑包的用户。可能您可以将script标签附加到该html文件中

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android