Vue 中如何正確引入第三方模組

方法一：配置 webpack ProvidePlugin 全域性引入

假設要使用到 jquery，那麼可以通過配置 webpack 的 ProvidePlugin 的外掛來全域性引入：

webpack.js.org/plugins/pro…

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})
複製程式碼

方法二：包裝成外掛在 Vue 中呼叫 use 方法安裝

另外一種比較靠譜的方法是將第三方模組打包成外掛，如我需要全域性使用 echarts，那麼在 src 目錄下新建一個 lib，並建立名為 echarts.js 的檔案：

import echarts from 'echarts'

export default {
  install (Vue) {
    Object.defineProperty(Vue.prototype, '$echarts', {
      value: echarts
    })
  }
}
複製程式碼

上述程式碼 export 一個物件，物件包含一個 install 方法，該方法的引數是 Vue 建構函式，我們使用 Object.defineProperty 或 Reflect 的方法將 $echarts 定義到 Vue.prototype 中去。

然後在專案中使用：

import echarts from './lib/echarts'

Vue.use(echarts) // use

new Vue({
    // ...
}).$mount('#app')
複製程式碼

這樣就可以在 vue 例項中通過 $echarts 來使用

// ...
let myChart = this.$echarts.init(this.$refs.main)
// ...
複製程式碼

其他方法

其他還有在 window 物件中全域性定義；或使用 Vue.prototype.xxx = xxx 等，都存在各樣問題，如 window 會導致全域性作用域汙染；後者定義方式不可靠，比方說 echarts 模組太大，會經常出現擴充套件定義失敗導致的報錯

請關注我的訂閱號，不定期推送有關 JS 的技術文章，只談技術不談八卦 ?