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

前言：由于对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注册的相关方法
 
 
1
2
3
4

（2）.ProvidePlugin[难以引入插件],在webpack中添加插件ProvidePlugin

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
  ]
//  $函数会自动添加到当前模块的上下文，无需显示声明
 
 
1
2
3
4
5
6
7

( 3 ).expose-loader[推荐使用] 
不需要任何其他的插件配合，只要将下面的代码添加到所有的loader之前

{
    test: require.resolve('jquery'),
    loader: 'expose?jQuery!expose?$'
 }
 
 
1
2
3
4

引用时改为如下方式

import $ from 'expose?$!jquery'
import 'jquery-ui' //插件可用   
 
 
1
2

imports-loader、script-loader同样可达到此效果，配置与功能都非常相似，在此不一一说明。

（4）.包装jquery[推荐使用] 
此方法只依赖于自己，完全不需要任何其他插件与加载器，创建jquery的包装对象jquery-vendor.js

import $ from 'jquery'
window.$ = $
window.jQuery = $
export default $
 
 
1
2
3
4

以后引用jquery时指向jquery-vendor.js

import $ from '../assets/jquery-vendor.js'
import 'jquery-ui'
//  此时UI的方法全部可用，如果需要引用bootstrap，可参照此方法
 
 
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）。

// webpack.config.js
module.exports = {
    ...
    resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    }
};
 
 
1
2
3
4
5
6
7
8
9

然而，在大多数情况下，dist版本也很好。

2.Use the ProvidePlugin to inject implicit globals（使用ProvidePlugin注入隐式全局变量）

大多数传统的模块依赖于特定全局的存在，如jQuery插件做 或jQuery。在这种情况下，您可以配置Webpack，以便在var  = require(“jquery”)每次遇到全局$标识符时进行前置。

var webpack = require("webpack");
    ...
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "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然后

module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader: "imports-loader?this=>window"
        }
    ]
}
 
 
1
2
3
4
5
6
7
8

导入装载器也可用于手动注入各种变量。但是大部分时间在ProvidePlugin隐含的全局变量中更为有用。

4.使用导入装载器来禁用AMD

有一些模块支持不同的模块样式，如AMD，CommonJS和旧版。但是，大多数时候他们首先检查define然后使用一些古怪的代码来导出属性。在这种情况下，可以通过设置来强制使用CommonJS路径define = false。

module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader: "imports-loader?define=>false"
        }
    ]
}
 
 
1
2
3
4
5
6
7
8

5.使用脚本加载器全局导入脚本

如果您不关心全局变量，并且只希望遗留脚本正常工作，那么还可以使用脚本加载器。它在全局环境中执行模块，就像您通过

module: {
    noParse: [
        /[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
    ]
}