webpack4 与只支持 script 标签引入的 js 库的结合使用及webpack.ProvidePlugin处理非npm库的配置方法

本文链接：https://blog.youkuaiyun.com/m0_37148591/article/details/88749136

本文档介绍了如何在webpack4项目中结合使用只支持script标签引入的JS库，如HT for Web，并通过webpack.ProvidePlugin处理非npm库的配置方法。在遇到全局变量未识别的问题后，作者发现正确方式是在HTML中使用script标签引入库。同时，文中详细展示了针对lodash成功配置ProvidePlugin的例子，但对于HT库的配置未能达到预期效果，作者提出了疑问并期待解答。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

使用场景

公司需要使用一个付费的2D和3D可视化库HT for Web,这个库提供的例子基本都是原生js编写。但是我已有的框架是webpack+react+ts,而且这个库因为是收费的它不在 npm 中故不能使用 npm/yarn 命令来安装依赖。一开始看到这个有点懵。
在看了入门文档和技术人员发例子之后感觉直接在html入口文件中引入本地类文件即可，测试发现该库本该暴漏的全局变量在我的代码中并不能被识别到，经过漫长的各种测试（期间包括使用webpack.ProvidePlugin的配置验证、找技术支持等）最终发现确实是在入口html文件种使用script标签引入即可。

为什么刚开始失败还花时间尝试其它的方法呢？这是因为相同的写法一开始项目运行没有报错仅仅是该暴漏的全局变量永远是undefined,并且多次测试都是这样的错误，直到最后鬼使神差的再反复验证 script 标签引入的这种方式时终于让我在控制台看到了一个报错，404 - 我想引入的本地依赖文件找不到，于是去修改了引用地址，出来了！！！！！！

心情很复杂。为什么之前没有看到这个报错，到底是没有还是我没看见啊！可是我明明开着控制台怎么可能看不见报错呢…

在这里写出来一方面是想记录下来一遍复习另一方面是想告诉有类似加载需求的同学们知道正确的方向不要想我一样走弯路花费不必要的时间。
在这里插入图片描述

webpack4 与只支持 script 标签引入的 js 库的结合使用

项目结构

webProject
|- public
	|- index.html
	|- js
    	 |- lib
		 	 |- ht
					|- core
					 	 |- ht.js
|- src
	|- @types
		|- index.d.ts

核心代码

html入口文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
....
</head>

<body class='scroll-1'>
	<div></div>
	<script src="./js/lib/ht/core/ht.js"></script>
	...其余js文件...
</body>
</html>

index.d.ts文件

declare var ht

测试tsx

import * as React from 'react'
interface IProps {
   
   }
interface IState {
   
   }
export default class HTTest extends React.Component<IProps, IState> {
   
   
	co