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註冊的相關方法

（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。在這種情況下，您可以配置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$/
    ]
}