2017年6月12日 星期一

[Vue] 在 Vue 中載入(ES6 import)bootstrap4 和 jQuery

由於 bootstrap4 需要依賴 jquery 和 tether 這兩個套件,因此在 webpack 的環境底下使用 bootstrap4 有一些需要留意的細節才能正常載入使用。
在這裡以 vue 當作範例,如果你使用的不是 vue 基本上應該還是能用類似的方法完成。

使用 vue-cli 安裝 vue

vue init webpack <project_name>
記得執行 npm install

安裝 bootstrap

npm install bootstrap@4.0.0-alpha.6
下載的時候要留意一下版本,如果直接執行 npm install bootstrap 的話,會安裝 bootstrap@3.3.7。

載入 bootstrap css 檔

可以直接在 main.js 中引入 bootstrap 的 css 檔:
// ./src/main.js
import 'bootstrap/dist/css/bootstrap.css'

載入 bootstrap js 檔

如果你只是要載入 Bootstrap 的樣式檔,基本上到上面那步就可以了。
但是如果你有需要使用到 bootstrap 的其他互動功能,那麼就需要在額外載入 jQuery, Tether 和 bootstrap 的 js 檔。
因此,讓我們一併安裝 jQuery 和 Tether:
npm install jquery tether

安裝 jQuery 和 tether

如果我們直接在 main.js 中去載入 jquery 和 bootstrap JS 會發生錯誤
import 'jquery'         // 載入 jQuery
import 'bootstrap/dist/css/bootstrap.css' // 載入 bootstrap CSS 檔
import 'bootstrap'      // 載入 bootstrap 的 JS 檔
提醒我們 jQuery 必須在 Bootstrap 之前載入:

在 webpack 中設定

這時候我們必須要 webpack 中做一些設定,我們必須要在 webpack 執行時就去載入 jQuery 和 Tether,如果你是用 Vue 可以去修改 ./build/webpack.base.conf.js 這支檔案,如果你是直接使用 webpack,大部分是去改 webpack.config.js 這支檔案。
要在 webpack 的設定中使用 webpack.ProvidePlugin():
//  ./build/webpack.base.conf.js


// 在最上方的地方載入 webpack
var webpack = require('webpack')


// 在 webpack 的設定檔中加入 plugin 的設定
module.exports = {
  entry: {},
  output: {},
  resolve: {},
  module: {},
  plugins: [new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery',
    jquery: 'jquery',
    Tether: 'tether'
  })]
}
在原本的 main.js 中,我們在載入 bootstrap 的 JS 和 CSS 就好,不需要再次載入 jQuery 和 Tether:
// ./src/main.js

import 'bootstrap'      // 載入 bootstrap 的 JS 檔
import 'bootstrap/dist/css/bootstrap.css' // 載入 bootstrap CSS 檔
如此就可以繼續開心的使用 bootstrap 啦!

完整程式碼

完整程式碼可在 github vue-import-bootstrap4 檢視。

額外補充(將 jQuery 載入到全域環境)

如果我們只是使用 import 'jquery' 這種作法,是無法在全域環境(window)下使用 jQuery(這裡抓到的 $ 是 chome 中內建的選擇器):
因此如果我們希望在全域環境下也可以使用 jQuery,我們可以使用下面這樣的寫法:
import jQuery from 'jquery'
window.$ = window.jQuery = jQuery

參考資料

Share:

0 意見:

張貼留言