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

最新推荐文章于 2023-03-03 17:13:21 发布
最新推荐文章于 2023-03-03 17:13:21 发布
阅读量3.9k 收藏 1
点赞数
分类专栏： webpack ht 文章标签： webpack ht
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37148591/article/details/88749136
版权

前言

使用场景

公司需要使用一个付费的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
最低0.47元/天 解锁文章
SarinaDu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
webpack 插件 ProvidePlugin 的使用方法和 eslint 配置
baidu_29813301的博客
04-18 807
webpack 插件 ProvidePlugin 的使用方法和 eslint 配置
webpack 如何将 文件引入到 script 标签中
最新发布
黄彪博客
03-22 462
由于项目是webpack打包的，而且项目不像vue-cli脚手架定义了static 目录和index.html文件的位置，只是定义了一个。结论：无法找到，因为没有引入h5player.min.js文件，webpack 是不会把其内容构建进来的。将整个目录拷贝到工程的根目录下，与index.html在统一层级，然后使用script 引入相对路径。文件，需要webpack打包编译 第三方提供的插件。引入script 的代码。
webpack使用(4)之引入第三方JS库
farmwang的专栏
11-27 6080
  一、script引入第三方库lodash 不建议使用 &lt;script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"&gt;&lt;/script&gt; 二、 npm 引入的方式 测试使用webpack.providePlugin插件 第一步：npm i --save lodash 使用webp...
webpack 的项目使用script动态导入第三方库
u013362969的博客
05-23 3629
最近有个项目需要导入腾讯云的图片验证js库 官方文档https://007.qq.com/quick-start.html?ADTAG=acces.cfg https://ssl.captcha.qq.com/TCaptcha.js 像这种只提供script方式引入的第三方库，在webpack项目中使用， 1、可以使用webpack.ProvidePlugin 【提供了npm安装方式的库没...
前端进阶：一文轻松搞定webpack基础知识、进阶与调优
云间月
03-31 371
前端进阶：一文轻松搞定webpack基础知识、进阶与调优 文章目录前端进阶：一文轻松搞定webpack基础知识、进阶与调优写在前面Webpack简介模块打包资源输入输出预处理器代码分片生产环境配置 写在前面 本文知识来源于作者对《webpack实战 入门、进阶与调优》的知识整理，为获得更好的阅读和观看体验，推荐访问我在wolai的读书笔记。webpack知识笔记 Webpack简介 何为webpack？ 模块打包工具：其核心功能是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终
webpack
qq_43539854的博客
05-30 501
Webpack 对webpack的理解 webpack是一个用于现代JS应用程序的静态模块打包工具。webpack的目的是实现前端项目的模块化，皆在更高效的管理和维护项目中的每一个资源。webpack可以很好的管理、打包开发中使用的HTML、CSS、JS和静态文件（图片、字体）等，让开发更高效 。 webpack解决了什么问题（基本功能） 代码转化：可以把ts转化为js；less、scss转换为css 文件优化：压缩HTML、CSS、JS文件，压缩图片等 代码分割：提取首屏不需要执行的代码，让其异步执行，
详解node.js中的npm和webpack配置方法
01-20
Node.js用c++语言编写而成的，是一个基于chrome V8引擎的javascript运行环境，让javaScript的运行脱离浏览器服务端，可以使用javaScript语言书写服务器端代码 1.使用node来实现一个http服务器 下面创建了一个端口为...
通过webpack引入第三方库的方法
10-18
【Webpack 引入第三方库的方法】 在现代前端开发中，Webpack 是一款强大的模块打包工具，它可以帮助我们将项目中的各种资源，如 JavaScript、CSS、图片等，进行编译和打包。在实际开发过程中，我们常常需要引入第三...
详解webpack引入第三方库的方式以及注意事项
10-17
然后在 JavaScript 模块中使用引入的库，Webpack 不会处理这部分内容，但可以直接在全局作用域中使用库。 **三、全局环境下使用第三方库** 为了避免每次使用第三方库时都需导入，可以将其设置为全局变量。Webpack ...
react antd（基于npm webpack react）.zip
02-10
react antd（基于npm webpack react）.zipreact antd（基于npm webpack react）.zipreact antd（基于npm webpack react）.zipreact antd（基于npm webpack react）.zipreact antd（基于npm webpack react）.zipreact...
08. 第三方包使用＜script＞标签引入和使用npm安装有何区别
qq_29517595的博客
03-03 760
对于要引用的第三方包，使用第三方CDN连接，用< script >标签引入和通过npm引入，并使用相关打包工具进行管理， 有何区别？
script标签如何实现异步加载_聊聊 webpack 异步加载（一）：webpack 如何加载拆包后的代码...
weixin_39752800的博客
11-26 202
前端代码在使用 ​webpack​ 进行打包时，经常会做两种优化：把稳定的库代码（如 ​react​、​antd​ 等）与业务代码分离，业务代码的更改不影响用户本地的库代码缓存，同时也把一个大文件拆分成多个文件，充分利用浏览器并行加载网络资源的能力，提高加载性能。配合 ​react-router​ 使用 ​import()​ 异步按需加载组件，减少不必要的资源加载，提高首屏性能。一般而言，常用的 ...
webpack优缺点_从Npm Script到Webpack，6种常见的前端构建工具对比
weixin_39602637的博客
01-13 277
从Npm Script到Webpack，6种常见的前端构建工具对比小编说：历史上先后出现了一系列构建工具，它们各有优缺点。由于前端工程师很熟悉JavaScript，Node.js又可以胜任所有构建需求，所以大多数构建工具都是用Node.js开发的。本文就来一一介绍它们。本文选自《深入浅出Webpack》。程序猿的生活：前端10K面试准备，最完整面试真题分享（含答案）！​zhuanlan.zhihu...
自定义实现webpack插件原理解析
bangbDIV的博客
08-13 682
webpack插件构成部分 一个具名javascript函数 在他的原型上定义apply方法 指定一个触及到 webpack本身的事件钩子 操作webpack内部的特定实例数据 实现功能后调用 webpack提供的callback函数 webpack基本架构 插件有一个构造函数实例化出来, 构造函数定义apply方法，在安装插件时,apply方法会被webpack的compiler调用一次。apply方法可以接受一个webpack的compiler对象的引用, 从而可以在回调函数中访问到com.
webpack中引入非npm、非模块化的第三方js
weixin_30896763的博客
10-15 965
vue-cli项目中用到了一个选择时间的插件，该插件不在npm中，也非模块化。直接在main.js中引入也无法使用。 最后解决办法是直接在index.html中用<script>标签引入，然后把使用该js的vue文件在.eslintignore中标出，防止eslint报错。 转载于:https://www.cnblogs.com/xiaofridge/p/9789699.html...
第五章 webpack5处理其他资源
天界程序员的博客
12-10 452
开发过程中可能还会处理什么字体、图标、音频等资源，这里我们记录一下。这里的HTML其实只要处理一个就行了，需要使用插件功能来自动引入打包后的资源到中，如：在 body 中使用 标签引入你所有 webpack 生成的 bundle。 在webpack配置中启用插件 文件名： 这个的文件路径可以自定义，不过作为公共模板文件，我们一般放在目录下面。 此时 dist 目录就会输出一个文件 可以看见该文件自动引入了webpack打包后的js文件。如果在 webpack 的输出中有任何 CSS 资源（例如，使用
webpack 3 零基础入门教程 #16 - 使用 ProvidePlugin 插件来处理像 jQuery 这样的第三方包...
weixin_33895475的博客
12-14 438
怎么在项目中引用 jQuery 这样的库呢？ 想一想，只要在 js 文件里，像 import React from 'react' 这样来处理应该就可以，我们来试一下。 首先，安装 jquery。 # 注意这里是 --save 而不是 --save-dev，因为要在线上环境上用 jquery $ npm install --save jquery 复制代码接下来来使用 jquery。 src/ap...
干货讲解：javaScript 模块导入之require 和 import的区别
m0_66194642的博客
09-28 1137
简单易懂，快速上手
需要在浏览器中使用 Node.js 的一些全局对象和方法 在TS下使用库webpack实现
05-29
在 TypeScript 中使用 Webpack 可以通过以下步骤来实现在浏览器中使用 Node.js 的一些全局对象和方法： 1. 安装依赖：首先需要安装 `webpack` 和 `webpack-cli` 两个依赖。 ``` npm install webpack webpack-cli --save-dev ``` 2. 配置 TypeScript 编译选项：在 `tsconfig.json` 文件中，需要将 `target` 选项设置为 `es5` 或更高版本，以支持一些新的 JavaScript 特性。同时，需要将 `module` 选项设置为 `commonjs`，以支持 Node.js 的模块化规范。 ```json { "compilerOptions": { "target": "es5", "module": "commonjs" } } ``` 3. 配置 Webpack：在根目录下创建一个 `webpack.config.js` 文件，用于配置 Webpack。 ```javascript const path = require('path'); module.exports = { mode: 'development', entry: './src/index.ts', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, resolve: { extensions: ['.ts', '.js'] }, module: { rules: [ { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ } ] } }; ``` 上述配置文件中，`entry` 选项指定了入口文件，`output` 选项指定了打包后的文件名和文件路径，`resolve` 选项指定了可以省略的文件扩展名，`module` 选项中的 `rules` 字段指定了处理 TypeScript 文件的 loader。 4. 安装 `ts-loader`：在命令行中执行以下命令来安装 `ts-loader`。 ``` npm install ts-loader --save-dev ``` 5. 编写代码：在 `src` 目录下编写 TypeScript 代码，使用 Node.js 的全局对象和方法。 ```typescript import fs from 'fs'; const data = fs.readFileSync('test.txt', 'utf8'); console.log(data); ``` 上述代码中使用了 Node.js 的 `fs` 模块来读取文件，并且使用了 `console.log` 方法来输出数据。 6. 打包代码：在命令行中执行以下命令来打包代码。 ``` npx webpack ``` 执行完毕后，会在 `dist` 目录下生成一个 `bundle.js` 文件，可以在浏览器中加载使用。需要注意的是，在浏览器中使用 Node.js 的全局对象和方法时，需要确保这些方法在浏览器中的兼容性和安全性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值