欢迎光临
我的个人博客网站

webpack系列-webpack内置插件ProvidePlugin的应用(定义全局变量,例如vue引入jquery全局使用)


vue+webpack使用ProvidePlugin插件引入jquery

先看一个实例,webpack+vue引入jquery并全局使用,这儿指通过配置,不是在静态页面使用script标签直接引入jquery。

在webpack配置中跟module同级中添加plugins,代码如下:

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

当然要使用jquery,需要npm安装下,即npm i jquery -S

现在你就可以在任意vue页面中不需要import导入jquery就能使用了。

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

 可以查看下segmentfault上的一个问题:《vue.js+webpack 中怎么引用并全局使用jquery》,但是回答中是有错误的,不需要在main.js在import导入jquery。

ProvidePlugin配置解析路径

默认情况下,模块解析路径为当前文件夹(./**)node_modules

上面的这种配置就是去node_modules下面找jquery的模块全局引入。

当然还可以配置工程中的路径,也可以指定完整路径:

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 }

现在我可以在任意实例页面中调用,如下代码:

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

 当然我们也可以通过alias属性配置快捷方式,如下代码:

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

我们再修改下ProvidePlugin的配置,如下代码:

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

这样也是可以的,然后我们在任意实例页面中调用:

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

 参考

赞(0) 打赏
未经允许不得转载:张拓的天空 » webpack系列-webpack内置插件ProvidePlugin的应用(定义全局变量,例如vue引入jquery全局使用)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏