Vue+Webpack引入Jquery第三方插件,jQuery is not defined 错误,解决方案
2017-05-12 15:23
1301 查看
前言:由于对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). 直接引入[难以引入插件]
(2).ProvidePlugin[难以引入插件],在webpack中添加插件ProvidePlugin
( 3 ).expose-loader[推荐使用]
不需要任何其他的插件配合,只要将下面的代码添加到所有的loader之前
引用时改为如下方式
imports-loader、script-loader同样可达到此效果,配置与功能都非常相似,在此不一一说明。
(4).包装jquery[推荐使用]
此方法只依赖于自己,完全不需要任何其他插件与加载器,创建jquery的包装对象jquery-vendor.js
以后引用jquery时指向jquery-vendor.js
上述四种方法自己只有方法三未尝试,第四种确实可行,但是出现了部分(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)。
然而,在大多数情况下,dist版本也很好。
2.Use the ProvidePlugin to inject implicit globals(使用ProvidePlugin注入隐式全局变量)
大多数传统的模块依赖于特定全局的存在,如jQuery插件做或jQuery。在
4000
这种情况下,您可以配置Webpack,以便在var = require(“jquery”)每次遇到全局$标识符时进行前置。
3.Use the imports-loader to configure this(使用导入加载器进行配置this)
一些遗留的模块依赖于this作为window对象。当模块在一个CommonJS的上下文中执行这将成为一个问题,this等于module.exports。在这种情况下,您可以this使用导入加载器覆盖。
运行npm i imports-loader –save-dev然后
导入装载器也可用于手动注入各种变量。但是大部分时间在ProvidePlugin隐含的全局变量中更为有用。
4.使用导入装载器来禁用AMD
有一些模块支持不同的模块样式,如AMD,CommonJS和旧版。但是,大多数时候他们首先检查define然后使用一些古怪的代码来导出属性。在这种情况下,可以通过设置来强制使用CommonJS路径define = false。
5.使用脚本加载器全局导入脚本
如果您不关心全局变量,并且只希望遗留脚本正常工作,那么还可以使用脚本加载器。它在全局环境中执行模块,就像您通过
一、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). 直接引入[难以引入插件]
// 可以直接引入jquery,但没有全局的jQuery变量 import $ from 'jquery' // 如果此时直接引入jquery 插件,则失败,如 import 'jquery-ui' // 错误,将会找不到jquery-ui注册的相关方法
(2).ProvidePlugin[难以引入插件],在webpack中添加插件ProvidePlugin
plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }), ] // $函数会自动添加到当前模块的上下文,无需显示声明
( 3 ).expose-loader[推荐使用]
不需要任何其他的插件配合,只要将下面的代码添加到所有的loader之前
{ test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
引用时改为如下方式
import $ from 'expose?$!jquery' import 'jquery-ui' //插件可用
imports-loader、script-loader同样可达到此效果,配置与功能都非常相似,在此不一一说明。
(4).包装jquery[推荐使用]
此方法只依赖于自己,完全不需要任何其他插件与加载器,创建jquery的包装对象jquery-vendor.js
import $ from 'jquery' window.$ = $ window.jQuery = $ export default $
以后引用jquery时指向jquery-vendor.js
import $ from '../assets/jquery-vendor.js' import 'jquery-ui' // 此时UI的方法全部可用,如果需要引用bootstrap,可参照此方法
上述四种方法自己只有方法三未尝试,第四种确实可行,但是出现了部分(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)。
// webpack.config.js module.exports = { ... resolve: { alias: { jquery: "jquery/src/jquery" } } };
然而,在大多数情况下,dist版本也很好。
2.Use the ProvidePlugin to inject implicit globals(使用ProvidePlugin注入隐式全局变量)
大多数传统的模块依赖于特定全局的存在,如jQuery插件做或jQuery。在
4000
这种情况下,您可以配置Webpack,以便在var = require(“jquery”)每次遇到全局$标识符时进行前置。
var webpack = require("webpack"); ... plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ]
3.Use the imports-loader to configure this(使用导入加载器进行配置this)
一些遗留的模块依赖于this作为window对象。当模块在一个CommonJS的上下文中执行这将成为一个问题,this等于module.exports。在这种情况下,您可以this使用导入加载器覆盖。
运行npm i imports-loader –save-dev然后
module: { loaders: [ { test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/, loader: "imports-loader?this=>window" } ] }
导入装载器也可用于手动注入各种变量。但是大部分时间在ProvidePlugin隐含的全局变量中更为有用。
4.使用导入装载器来禁用AMD
有一些模块支持不同的模块样式,如AMD,CommonJS和旧版。但是,大多数时候他们首先检查define然后使用一些古怪的代码来导出属性。在这种情况下,可以通过设置来强制使用CommonJS路径define = false。
module: { loaders: [ { test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/, loader: "imports-loader?define=>false" } ] }
5.使用脚本加载器全局导入脚本
如果您不关心全局变量,并且只希望遗留脚本正常工作,那么还可以使用脚本加载器。它在全局环境中执行模块,就像您通过
module: { noParse: [ /[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/ ] }
相关文章推荐
- Vue+Webpack引入Jquery第三方插件,jQuery is not defined 错误,解决方案
- Angularjs + Webpack 框架里,引入Bootstrap-datepicker插件时,datepicker is not a function错误的解决方法
- jQuery is not defined 错误,解决方案
- Webpack+Vue如何导入Jquery和Jquery的第三方插件
- jQuery is not defined错误的解决方案
- vue init webpack-simple 模板中全局引入Jquery正确使用方法 可保jQuery插件正常使用
- html-webpack-plugin2.22.0、Webpack与gulp结合时出现ReferenceError: window is not defined错误的解决办法
- Webpack+Vue如何导入Jquery和Jquery的第三方插件
- vue-cli webpack中引入jquery
- [JAVA web]PermGen space错误,Target runtime Tomcat 7.0 is not defined,EntityManager方法简介
- vue-cli webpack 引入jquery
- Vue2+Webpack错误:Do not mount Vue to <html> or <body> - mount tonormal elements instead.
- 如何在vue-cli+webpack构建的项目引入jquery和bootstrap
- 海康web视频插件错误:TypeError: c.HWP_GetLocalConfig is not a function
- jQuery.form Ajax无刷新上传错误 (jQuery.handleError is not a function) 解决方案
- webpack shimming modules 引入第三方插件
- vue+webpack引入 jquery 需要修改的地方
- vue-cli webpack 引入jquery
- 引入JQuery提示:Uncaught ReferenceError: $ is not defined
- jQuery ReferenceError: $ is not defined 错误的处理办法