webpack externals 外部加载 cdn 文件到底是怎么用的？

[daiwenzh5]

PS: 请关注问题本身，不要往无关方向延申，谢谢。

1 、externals 之后，需不需要安装依赖： a.需要，依赖会被自动剔除； b.不需要，直接从文件加载；

• 实际上在测试时，不安装依赖会无法编译，缺失类型；

2 、externals 的具体语法怎么使用的： a.在网上找了一圈，都是官网的 jQ，干懵了； b.引入 cdn 时，是写 ['文件名','文件内 export 变量名']？

---

以上，这两个问题折磨我好几个小时了，硬是没测出来，望高手、前辈们指教。

[randyo]

1，需要安装依赖的，这样才能编译和智能语法提示什么的。打包时 webpack 会把 externals 的部分去除。比如你写一个插件，没有 externals 的话，只需要在网页引入打包后的 js 就可以运行了，有 externals 的话还需要在你的 js 之前引入被 externals 的部分脚本。
2，语法就是 key 是引用的包名，value 是引入后的变量名称。比如 import $ from 'jquery'，要把 jQuery 作为 externals 的话就写 jquery:'$'。看看 webpack 文档，还有更精细的设置 https://webpack.docschina.org/configuration/externals/

[wszgrcy]

你可以理解为原来找 xxx 依赖引入，后来改为 window.externals 当然，引入 cdn 的包就需要你自己搞了

[wszgrcy]

@wszgrcy 写错了是改为 window.yyyy(你定义的那个)

[daiwenzh5]

@randyo @wszgrcy 感谢你们的回答，但我还是没整明白。。。
[]( https://imgchr.com/i/dFobCD)
我使用 quasar-tiptap 这个依赖，引入方式是这样的
import {QuasarTiptapPlugin} from 'quasar-tiptap/lib/quasar-tiptap.esm'

externals = {
QuasarTiptapPlugin: ['quasar-tiptap/lib/quasar-tiptap.esm', 'QuasarTiptapPlugin']
}
我在 index.html 中添加了 cdn 链接。
是这样用的吗？打包之后，这个依赖还是在啊，体积并没有缩小。

[randyo]

@daiwenzh5 写反了吧，应该是 'quasar-tiptap/lib/quasar-tiptap.esm' : 'QuasarTiptapPlugin'

[daiwenzh5]

@randyo 刚刚试了下，成功了，果然如此。

但我是仿照官网写的：
```js
externals: {
subtract: ['./math', 'subtract']
}
```
我以为引用子属性得用这个二级结构。

嗯问题解决了，再次感谢你的解答！