1.使用npm安裝jquery套件

npm install jquery -save

採用全局安裝，如此一來就不需要在每個頁面都設置一次

2.設置webpack.base.conf.js文件

引入webpack套件

const webpack = require('webpack')

接下來在module.exports中加入

plugins: [
 new webpack.ProvidePlugin({
     jQuery: "jquery",
     $: "jquery",
     window.jQuery:"jquery",
     root.jQuery:"jquery"
 })
]

這部分設定完成後需要重新執行 npm run dev

反正只要有動到build,config資料夾裡面的檔案都要進行重啟

3.導入jquery

在需要使用到的頁面進行導入

import jQuery from 'jquery'

其實這邊我有進行過測試，按照第二步驟進行的話，基本上就算不用做第三步驟也沒有問題，我們在全局部署中已經告訴專案會導入jquery這個套件！

就在ProvidePlugin中，告知程式本身若在編譯時遇到沒看過的符號或是字詞，會使用哪一個套件庫來解決

上例的設定是在碰到$，jQuery，window.jQuery或root.jQuery時都載入 jquery 套件。

因此這樣設定下，即可達成在使用Bootstrap下出現error的情況。

所以若是有其它套件是從npm即可安裝完成的情況下，導入的方法基本上都是一致的！

results matching ""

    No results matching ""