webpack打包jQuery,jQuery未定义

最新推荐文章于 2024-12-04 22:28:52 发布

weixin_30686845

最新推荐文章于 2024-12-04 22:28:52 发布

阅读量776

点赞数

CC 4.0 BY-SA版权

文章标签： webpack javascript ViewUI

原文链接：http://www.cnblogs.com/detanx/p/webpackJq.html

本文介绍了两种在现代前端项目中兼容老式jQuery插件的方法：使用webpack的ProvidePlugin结合expose-loader，以及通过webpack配置externals选项。两种方法均可避免因全局变量引起的冲突。

怎么来兼容老式jQuery插件

ProvidePlugin + expose-loader / externals

1.ProvidePlugin + expose-loader

webpack.config.js中在plugins中配置

webpack.config.js中在module中配置

2.externals

webpack.config.js中配置externals

注意：两者选择其中一种即可，两种都使用依旧会报错。

转载于:https://www.cnblogs.com/detanx/p/webpackJq.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30686845

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

webpack打包jquery多页_详解如何使用webpack打包多页jquery项目

weixin_39732316的博客

12-20

544

虽然已经2019年了不过有一些项目还是需要用到jquery的不过考虑到使用jquery的一堆兼容性问题也为了可以顺利地使用ES6来撸代码研究使用webpack+babel打包代码来发布几个重点：1.为了将模块分割加载，不至于一个js文件过大，一个页面中使用多个js文件2.由于是多页项目(多个html)，每个页面使用的js文件都不一致基于以上两点，需要配置多个入口文件3.会把小图片转换成base64...

vue项目怎么全局引入jquery

qq_45067263的博客

11-01

1804

项目场景： vue项目怎么引入jquery 使用jq的时候报错$ is not defined 在main.js中引入后，组件内使用$报$未定义，只有在组件中import $ from 'jquery'才可以太麻烦配置都可以的直接看解决方案，没配置的从头来首先看有无配置webpack package.json里面搜索webpack，没用的话安装 webpack npm install webpack --save-dev(在本地安装) 配置的有weibpack，但是没有webpack.base.con

参与评论您还未登录，请先登录后发表或查看评论

详解如何使用webpack打包多页jquery项目

11-30

虽然已经2019年了不过有一些项目还是需要用到jquery的不过考虑到使用jquery的一堆兼容性问题也为了可以顺利地使用ES6来撸代码研究使用webpack+babel打包代码来发布几个重点： 1.为了将模块分割加载，不至于一个js文件过大，一个页面中使用多个js文件 2.由于是多页项目（多个html），每个页面使用的js文件都不一致基于以上两点，需要配置多个入口文件 3.会把小图片转换成base64，所以可能css转成的js文件会比较大，所以css文件都单独设置入口js 例如，我们有三个页面：index、share、assist 三个页面有通用的css文件：common.

export default 打包_Webpack打包与程序调试

weixin_39628384的博客

11-19

427

Webpack终于打包成功了，也算发布了Demo，回头继续完善程序时，却发现用webpack打包后的程序却极难调试，也用了sourcemap选项，但依然难于调试，不报错，但自己代码本身功能实现有错时，在Chrome根本无法追踪源码（也许本人功力不够）。总不能调试弄一套代码，打包又弄一套代码吧？本人的想法是：调试和打包必须是同一套代码，却代码都位于私有的src目录中。在调试时，如果直接将包含impo...

关于webpack打包时 JQuery问题

weixin_43858329的博客

05-03

593

在运行 npm run dev 时候报错： ERROR in ./node_modules/jQuery/lib/node-jquery.js Module not found: Error: Can’t resolve ‘jsdom’ in ‘D:\apache\webpack-Study\node_modules\jQuery\lib’ @ ./node_modules/jQuery/lib/...

详解webpack引用jquery（第三方模块）的三种办法

10-16

这个配置告诉webpack在编译每一个模块时，如果发现模块中有$、jQuery或者jquery变量未定义，则自动注入jquery。 3. 通过这种方式配置后，在项目的任何模块中都不需要再显式地引入jquery，任何地方都可以直接使用$...

webpack中引用jquery的简单实现

10-22

这段代码会等待文档加载完毕后执行，且不会抛出未定义的错误，因为Webpack已经通过ProvidePlugin全局注入了jQuery。总结一下，要在Webpack中引用jQuery，你需要： 1. 使用npm安装jQuery。 2. 在Webpack配置文件中...

Vue中正确使用jQuery的方法

10-19

这段代码的作用是确保在项目中的任何地方，只要使用`$`、`jQuery`或`jquery`变量，webpack就能正确地注入jQuery，而无需显式地导入它。接下来，在项目入口文件`main.js`中导入jQuery： ```javascript import '...

jquery3.7.1中jqfake报错

最新发布

08-05

如果使用了模块打包工具（如 Webpack、Rollup 等），并且 jQuery 没有正确配置为全局变量，可能会导致 `'jqfake'` 报错。 **解决方案**： - **配置全局变量**：在打包工具中配置 jQuery 为全局变量，例如在 Webpack...

jquery打包到webpack项目

qq_36579455的博客

12-21

1469

入口文件 — index.js window.$ = require('jquery') webpack.config.js const webpack = require('webpack') module.exports = { ... plugins: [ ... new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ... ] ... } ...

解决使用 jQuery 在 Webpack 打包内容的过程中遇到的问题：‘ERROR in ./node_modules/jquery/lib/node-jquery.js 13:24-43‘

狮子座的男孩

10-08

1102

1、出现问题的提示为： 'ERROR in ./node_modules/jquery/lib/node-jquery.js 13:24-43'; 'Module not found: Error: Can't resolve 'location' in 'D:\*******\Webpack\node_modules\jquery\lib' @ ./04index2.js 1:0-22 9:0-1 10:4-5 11:4-5'; 2、解决问题的方案： A、去 npm 社区去搜一下最新的 jquery

Webpack下莫名其妙出现的jQuery与报错，记一次奇妙的Debug旅程

weixin_33875564的博客

12-12

228

场景重现项目是一个SPA，使用了Vue+Vue-Router+Webpack+jQuery。报错的场景如下：为何称之为莫名其妙？项目虽然作为一个SPA，也引用了jQuery。但是！！！我所有的JS文件全部用Webpack打包了呀！不应该会有单独的jQuery文件啊……把报错内容上百度一搜索，发现完全不搭架。于是开始了苦思冥想和Deb...

webpack5配置传统jQuery多页面应用

gaotlantis的博客

10-30

1037

大家好,我是chenms,最近我们公司有要求需要开发几个以前传统的前后端不分离的jQuery老项目,现在大部分都是用vue或者react开发习惯了组件化的方式,所以我这边打算用webpack5配置一个可以打包传统jQuery多页面应用。

【日记】WebPack开发，引入jQuery第三方库，一直引入失败的解决经历。

黑夜的风的博客

06-21

1689

【背景】昨晚把项目传到github，然后想把DEMO地址放出来。打包时发现路由传值的页面配置错误，css位置错误。打包搞了感觉有点麻烦，不如直接在服务器上装个nodejs环境，然后npm run dev，运行项目即可。然后，我的故事开始了......【经历】首先，我通过yum安装了nodejs，配好了Node的ftp文件夹。上传运行，成功！然而，到公网123.123.123:8080，却无法访问。...

第31天：安全开发-JS应用&WebPack打包器&第三方库JQuery&安装使用&安全检测

m0_74930529的博客

12-04

1091

webpack的两种项目打包方式

m0_46302126的博客

04-26

466

webpack的两种项目打包方式文章目录webpack的两种项目打包方式手动打包自动打包手动打包 1.新建项目文件夹 2.初始化管理配置文件package.json npm init -y 3.新建src目录 4.新建 src -> index.html 内容为 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-

初识 Webpack (六) 安装第三方库依赖（jquery为例）

Sicily_winner的博客

01-27

675

目录 ✦ 全局暴露expose-loader jquery ✦ 参考文章通过npm安装webpack ✦ 加速器配置 ✦ jquery第三方依赖添加 0、项目基本结构 1、webpack.config.js 2、jquery引入 3、相应文件编译得到结果 4、依赖安装 npm 5、plugins设置 6、创建public文件和整体代码 7、打包完毕，到public文件...

配置webpack不打包第三方包

weixin_44054088的博客

05-06

5604

通常情况下我们不打包第三方包，因为第三方包太大，和bundle打包到一起会造成资源体积过大，所以我们还是通过script标签的方式把第三方资源引入到页面中，只需要通过以下配置即可，这里以jQuery为例。 1、下载第三方包 npm i jquery 2、在页面中引入资源  <script src="....