vue引入全局静态变量_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

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值