webpack模块化全局变量的方法

场景是这样的，项目中已经index.html全局引入jquery。但是通过npm install fullcalendar之后，引入fullcanlendar会报错，提示找不到jquery模块。

主角出场

• webpack.ProvidePlugin 一个webpack内置的插件

使用方法

plugins.push(
    new webpack.ProvidePlugin({ 
        jQuery: "jquery", 
        $: "jquery", 
        jquery:"jquery" 
    })
)

其中"jquery"字符串是要模块化引用的的window上的直接属性引用window.jquery
这样之后，重新开启调试
就可以这样

import $$  from "jQuery";
import $$$ from "$";
import $$$$ from "jquery";

$$ === $$$ === $$$$  === jquery === window.jquery

如果是在vue-cli的项目中，追加如下代码到 build/webpack.base.conf.js文件module.exports 对象的中

module.exports = {
    externals...
    entry...
    plugins:[
        new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery", jquery:"jquery" })
    ]
}