Vue+Webpack引入Jquery第三方插件,jQuery is not defined 错误,解决方案
来源:互联网 发布:python 不显示warning 编辑:程序博客网 时间:2024/06/11 16:20
前言:由于对webpack的了解有限,所以在项目部署出现许多问题
一、webpack使用ES6语法,第三方js可以引入通过import,可以通过npm 配置到项目中或者直接下再加入项目js文件中
首先无论require还是import,都不是webpack的发明,它们是已经存在于世的不同的模块化规范(目前都不能直接运行于浏览器,于是需要通过webpack在配合各种plugin、loader将其转义,使之可以运行在浏览器里,关于require,最早应该见于nodejs开发,属于CommonJS规范的一部分,可以看Modules/1.1。
关于import,是ES2015里的新模块化规范,可以看ES6 modules,_就是个变量,当然能在js里使用,这个jquery里的$是一种东西,无非是命名怪了点,总归还是变量
require或者import用法,那目前仍然需要通过babel或者traceur之类的转义工具将之转义为ES5语法,才能在浏览器里运行。但对于lodash库本身,并不是非得利用webpack…之类的工具才能用,直接使用&script&标签放在html里,就可以使用了。<
二、vue引入jquery插件出现jQuery is not defined
1、如果要使用$、jquery、jQuery必须先引入jquery.js,如果报这些错误先看路径和引入顺序问题
2、在vue+webpack环境中,jquery的第三方插件还是会报错,可以参考
Webpack引入jquery及其插件的几种方法
(1). 直接引入[难以引入插件]
- 1
- 2
- 3
- 4
(2).ProvidePlugin[难以引入插件],在webpack中添加插件ProvidePlugin
- 1
- 2
- 3
- 4
- 5
- 6
- 7
( 3 ).expose-loader[推荐使用]
不需要任何其他的插件配合,只要将下面的代码添加到所有的loader之前
- 1
- 2
- 3
- 4
引用时改为如下方式
- 1
- 2
imports-loader、script-loader同样可达到此效果,配置与功能都非常相似,在此不一一说明。
(4).包装jquery[推荐使用]
此方法只依赖于自己,完全不需要任何其他插件与加载器,创建jquery的包装对象jquery-vendor.js
- 1
- 2
- 3
- 4
以后引用jquery时指向jquery-vendor.js
- 1
- 2
- 3
上述四种方法自己只有方法三未尝试,第四种确实可行,但是出现了部分(pc微信内置浏览器一样)移动端浏览器打不开的问题(显示空白页),那还是存在兼容性问题,加载方式还是有问题webpack中管理jQuery插件依赖说出问题的根本原因(由于链接是stackoverflow网站,这么就copy过来了)我们要知其然知其所以然,这里使用npm imports-loader就可以解决了,最后我还要了解一下webpack imports-loader
Prefer unminified CommonJS/AMD over dist
大多数模块链接在他们dist的main领域的版本package.json。虽然这对大多数开发人员来说非常有用,但对于Webpack来说,最好是将src版本进行别名,因为这样,webpack能够更好地优化依赖关系(例如使用时DedupePlugin)。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
然而,在大多数情况下,dist版本也很好。
2.Use the ProvidePlugin to inject implicit globals(使用ProvidePlugin注入隐式全局变量)
大多数传统的模块依赖于特定全局的存在,如jQuery插件做
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
3.Use the imports-loader to configure this(使用导入加载器进行配置this)
一些遗留的模块依赖于this作为window对象。当模块在一个CommonJS的上下文中执行这将成为一个问题,this等于module.exports。在这种情况下,您可以this使用导入加载器覆盖。
运行npm i imports-loader –save-dev然后
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
导入装载器也可用于手动注入各种变量。但是大部分时间在ProvidePlugin隐含的全局变量中更为有用。
4.使用导入装载器来禁用AMD
有一些模块支持不同的模块样式,如AMD,CommonJS和旧版。但是,大多数时候他们首先检查define然后使用一些古怪的代码来导出属性。在这种情况下,可以通过设置来强制使用CommonJS路径define = false。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
5.使用脚本加载器全局导入脚本
如果您不关心全局变量,并且只希望遗留脚本正常工作,那么还可以使用脚本加载器。它在全局环境中执行模块,就像您通过
- Vue+Webpack引入Jquery第三方插件,jQuery is not defined 错误,解决方案
- Vue+Webpack引入Jquery第三方插件,jQuery is not defined 错误,解决方案
- jQuery is not defined 错误,解决方案
- jQuery is not defined错误的解决方案
- vue expose-loader 引入jQuery Error in created hook: "ReferenceError: $ is not defined"
- vue-cli+webpack引入jQuery
- 提示jQuery is not defined错误原因
- 1.jQuery is not defined 错误
- jquery失效,ReferenceError: $ is not defined错误
- jQuery is not defined
- $ jQuery is not defined
- jQuery is not defined
- vue引入 jquery 插件
- VUE引入第三方插件
- 引入JQuery提示:Uncaught ReferenceError: $ is not defined
- vue+vue-cli+webpack中引入jQuery
- webpack shimming modules 引入第三方插件
- vue-cli webpack中引入jquery
- Apache + CGI(Python)的简单实用WEB程序的开发
- 输出两个整数的最大值
- 解决Dialog中有EditText时无法自动弹出输入的问题
- 4.11 import 语句
- Hadoop2.6.4搭建笔记
- Vue+Webpack引入Jquery第三方插件,jQuery is not defined 错误,解决方案
- js多余的内容显示省略号
- postman工具使用总结
- CVE-2017-8759 复现
- 杂谈:信息帅选和工作习惯思维改变
- 常见的几种特征
- runLoop 概念解析
- 【Scikit-Learn 中文文档】多类和多标签算法
- 4.12 访问权限