电竞比分网-中国电竞赛事及体育赛事平台

搜索
分享

webpack系列-webpack內(nèi)置插件ProvidePlugin的應(yīng)用（定義全局變量，例如vue引入jquery全局使用）

 丹楓無跡 2021-08-24

vue+webpack使用ProvidePlugin插件引入jquery

先看一個實例，webpack+vue引入jquery并全局使用，這兒指通過配置，不是在靜態(tài)頁面使用script標(biāo)簽直接引入jquery。

在webpack配置中跟module同級中添加plugins,代碼如下：

const webpack = require('webpack')

module.exports = {
  context: path.resolve(__dirname, '../'),
  // ...其他代碼省略
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ],
  // ... 其他代碼省略
}

當(dāng)然要使用jquery,需要npm安裝下，即npm i jquery -S

現(xiàn)在你就可以在任意vue頁面中不需要import導(dǎo)入jquery就能使用了。

 mounted() {
    $('#btn').on('click',function(){
      console.log('我調(diào)用jquery了')
    })
  }

 可以查看下segmentfault上的一個問題：《vue.js+webpack 中怎么引用并全局使用jquery》，但是回答中是有錯誤的，不需要在main.js在import導(dǎo)入jquery。

ProvidePlugin配置解析路徑

默認情況下，模塊解析路徑為當(dāng)前文件夾（./**)和node_modules。

上面的這種配置就是去node_modules下面找jquery的模塊全局引入。

當(dāng)然還可以配置工程中的路徑，也可以指定完整路徑：

plugins: [
    new webpack.ProvidePlugin({
      'utils': path.resolve(path.join(__dirname, '..','src/utils/index.js'))
    })
  ]

我在src/utils/index.js代碼中寫如下一個方法：

export function sum(a,b) {
  return a + b
}

現(xiàn)在我可以在任意實例頁面中調(diào)用，如下代碼：

mounted() {
    var result = utils.sum(1,2);
    console.log(result) // 3
  }

 當(dāng)然我們也可以通過alias屬性配置快捷方式，如下代碼：

alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'utils': resolve('src/utils/index.js') // 新增的
    }

我們再修改下ProvidePlugin的配置，如下代碼：

plugins: [
    new webpack.ProvidePlugin({
      'utils': 'utils'
    })
  ]

這樣也是可以的，然后我們在任意實例頁面中調(diào)用：

mounted() {
    var result = utils.sum(1,2);
    console.log(result) // 3
  }

 參考

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多