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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1562 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

externals

CDN

文件

依赖

6 条回复 • 2020-08-15 23:41:49 +08:00

randyo

2020-08-15 08:35:08 +08:00 via Android

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

2020-08-15 08:59:44 +08:00 via Android

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

wszgrcy

2020-08-15 09:00:25 +08:00 via Android

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

daiwenzh5

2020-08-15 14:38:51 +08:00

@randyo @wszgrcy 感谢你们的回答，但我还是没整明白。。。
[![dFobCD.png]( https://s1.ax1x.com/2020/08/15/dFobCD.png)]( 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

2020-08-15 23:04:43 +08:00 via Android

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

daiwenzh5

2020-08-15 23:41:49 +08:00

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

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

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