Vue+Webpack引入Jquery第三方插件,jQuery is not defined 错误,解决方案

5 篇文章 0 订阅
4 篇文章 0 订阅

前言:由于对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). 直接引入[难以引入插件]

// 可以直接引入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插件做 jQueryWebpack便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$/
    ]
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值