webpack 如何全局暴露别人的库了？

Question

要用第三方插件aa， 本地npm install aa --s 后。
在main.js 中 import AA from "aa" 可以打印出AA的。

我希望把AA 在各个 vue 模块中 使用。 希望全局暴露这个函数名。

在main.js 中下面两种可行，但不是我要的。
不希望手动绑到vue 原型上。
也不希望手动这样 window.AA ==AA 。

怎么做到，谢谢。
这种全局引入功能是否与 插件本身内部的实现情况有关系。？

Answer 1

关键看你插件的使用场景是什么，不考虑原型，那可以考虑全局混入它 Vue.mixin()。

Answer 2

如果你只是用aa的某一个方法，可以用vue的inject

Answer 3

webpack 有3中方法暴露全局变量, 根据你的要求，用providerPlugin比较符合

1. expose-loader 暴露到window 对象上
2. providerPlugin 给每一个文件提供 $,但是在全局变量中没有，文件注入的方式
3. externals 配置，引入不打包，以script 标签引入

// 1
rules: [
    {
     test:require.resolve('jquery'),
     use:"expose-loader?$"
    },
]
  
// 2
plugins:[
      new webpack.ProvidePlugin({
         $:'jquery'
     })  
],
// 3 
externals:{ 
  jquery: 'jQuery', // 
},

Answer 4

这个的话， 可以去看看dva这个库，他就全局暴露了其他人的库。