为什么几乎所有 Vue 组件库都有 CDN 引入介绍，但就是不告知通过 CDN 引入后如何配合着用 webpack 的 externals 呢？
Newyorkcity · 2020-02-27 15:10:36 +08:00 · 2798 次点击这是一个创建于 1737 天前的主题，其中的信息可能已经有所发展或是发生改变。
https://webpack.js.org/configuration/externals/
module.exports = {
//...
externals: {
'element-ui': 'ELEMENT'
}
};
比如这个例子里的ELEMENT,官方文档是查不到的，自己谷歌出来（谷歌出来的也有错误答案，一个一个试过去排除的）。
前段体积太大，优化的方法一大堆，我觉得用 webapck 的 externals 技巧直接在产品版本中不包含是最有效的。当然，可能仅仅针对我这种主要学后端，前端凑合用，服务器还是用学生优惠买的网速贼差的人来说？
那前端大牛到底是咋个优化的啊？
真的不是茴字整出无数写法的没必要之举么？
 |
1
nozer 2020-02-27 16:33:25 +08:00
如果你是通过 cdn 的方式引入 vue，那就没别要在 webpack 里面配置了，直接用就可以了。 也不需要导入。 那就是个全局变量。
|
 |
2
randyo 2020-02-27 16:43:05 +08:00 via Android
你用 CDN 引入就默认你 Vue 也是用 CDN 引入的呗。不然别人怎么知道你用什么打包工具，每个打包工具都有自己的文档，自己看就行了。
|
 |
3
shintendo 2020-02-27 16:48:04 +08:00
大概因为这是 webpack 配置的范畴，element 相比其它库并没有什么特殊性，所以没必要在文档里说这个吧
|
|
4
shintendo 2020-02-27 16:50:50 +08:00
另外我很怀疑组件库放 externals 是不是利大于弊
|
 |
5
redbuck 2020-02-27 17:31:07 +08:00
我记得 element 依赖 vue，你这样估计还得报错。
如果组件库 cdn 引，那它的依赖也必须 cdn 引，还得在它上面。 @shintendo 还是有点特殊的，Element 是关键字，所以 element-ui 暴露的全局关键字是全大写的 |
 |
6
yhxx 2020-02-27 17:34:51 +08:00
这种直接去 window 上找吧，比搜出来一个一个试要快一点。。。
可能这种场景确实比较少吧，所以文档作者也不是很关注？ |
 |
7
yangxiongguo 2020-02-27 17:41:45 +08:00
都用 CDN 了为什么不直接在 HTML 引入呢
|
 |
8
Newyorkcity OP @nozer
@yangxiongguo 啊？我确实直接在 index.html 中引入了，就是用 vue-cli 生成的最简单的项目的 public 文件下面的 index.html... 这样引入了之后可以直接用吗？就在 app.vue 中直接放一个<el-button>，在 import from elementui 这种语句不写的情况下？我记得我之前碰过壁用不来啊。。。 |
|
9
yangxiongguo 2020-02-27 19:17:30 +08:00
|
|
10
randyo 2020-02-27 19:45:05 +08:00 via Android  2
其实如果用 CDN 引入了 element-ui，在 webpack 中的 externals 写一个'element-ui':'ELEMENT'就是告诉 webpack 打包的时候遇到 import xx from 'element-ui'的时候不要打包它的代码进来，你会自己 CDN 引入，并且暴露的全局名称为 ELEMENT，webpack 就只把 xx 变成 ELEMENT 而已，其他的都不做。
|
 |
11
black11black 2020-03-04 13:03:37 +08:00
屑文档
|
Select Language