webpack4 与只支持 script 标签引入的 js 库的结合使用及webpack.ProvidePlugin处理非npm库的配置方法
前言
使用场景
公司需要使用一个付费的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入口文件
<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> {
constructor(props: IProps) {
super(props)
this.state = {
}
}
componentDidMount() {
this.init()
}
init = () => {
console.log(ht) // 可以正常获取到ht.js暴漏的全局变量ht
}
render() {
return (
<div />
)
}
}
真的就只有这几步就ok了，现在再看真的想不通之前怎么花了那么多时间
webpack.ProvidePlugin处理非npm库的配置方法
webpack.ProvidePlugin处理ht - 首先说明这种方式没有达到想要的效果
正因为使用 webpack.ProvidePlugin 处理 ht 没有达到想要的效果,才有了 webpack.ProvidePlugin处理lodash 的配置操作，主要为了测试是我配置错误还是其它问题
项目结构
webProject
|- public
|- index.html
|- js
|- lib
|- ht
|- core
|- ht.js
|- src
|- @types
|- index.d.ts
|- lib
|- ht
|- core
|- ht.js
核心代码
html入口文件
<html lang="zh-CN">
<head>
....
head>
<body class='scroll-1'>
<div>div>
...其余js文件...
body>
html>
如上所示去掉ht.js的因为，这种方式不需要script标签引入了
index.d.ts文件
declare var ht
webpack.config.js
const webpack = require('webpack')
...
module.exports = {
...
entry: {
...
},
output: {
...
},
devServer: {
...
},
resolve: {
...
},
module: {
...
},
plugins: [
new webpack.ProvidePlugin({
ht:path.resolve(__dirname, './src/lib/ht/core/ht.js')
})
])
}
测试tsx
import * as React from 'react'
interface IProps {}
interface IState {}
export default class HTTest extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props)
this.state = {
}
}
componentDidMount() {
this.init()
}
init = () => {
console.log(ht) // 不可以正常获取到ht.js暴漏的全局变量ht，这里输出的ht是一个空对象
}
render() {
return (
<div />
)
}
}
webpack.ProvidePlugin处理lodash - 正确
项目结构
webProject
|- public
|- index.html
|- js
|- lib
|- ht
|- core
|- ht.js
|- src
|- @types
|- index.d.ts
|- lib
|- ht
|- core
|- ht.js
|- lodash
|- lodash.js
核心代码
html入口文件
<html lang="zh-CN">
<head>
....
head>
<body class='scroll-1'>
<div>div>
...其余js文件...
body>
html>
如上所示去掉ht.js的因为，这种方式不需要script标签引入了
index.d.ts文件
declare var _
webpack.config.js
const webpack = require('webpack')
...
module.exports = {
...
entry: {
...
},
output: {
...
},
devServer: {
...
},
resolve: {
...
},
module: {
...
},
plugins: [
new webpack.ProvidePlugin({
_:path.resolve(__dirname, './src/lib/lodash/lodash.js'),
})
])
}
测试tsx
import * as React from 'react'
interface IProps {}
interface IState {}
export default class HTTest extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props)
this.state = {
}
}
componentDidMount() {
this.init()
}
init = () => {
console.log( _.chunk(['a', 'b', 'c', 'd'], 2)) // 可以正常使用 lodash 的方法
}
render() {
return (
<div />
)
}
}
关于 webpack.ProvidePlugin 的总结与疑问
测试发现 webpack.ProvidePlugin 的配置方式是没有问题的但是 lodash 可以正常使用而 ht 不可以。
不知道 ht 配置失败的原因到底是什么，我猜测是不是和 ht 源码的编写规范有关系？求大佬指点