如何使用Webpack(vue-cli)从生产构建中排除CommonJS库

Question

我已经通过使用Webpack配置externals为vue做到了这一点

---

首先，我在我的html文件中包含了Vue的CDN

index.html

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

然后我修改了我的webpack配置

vue.config.js

module.exports = {
configureWebpack: {
// ...
externals: {
vue: 'Vue',
}
// ...
},
}

事情进展顺利。

---

但当我尝试使用vue-class-component和vue-property-decorator时，它并没有像预期的那样工作

index.html

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-class-component@7.2.5"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-property-decorator@9.0.0"></script>

vue.config.js

module.exports = {
configureWebpack: {
// ...
externals: {
vue: 'Vue',
'vue-class-component': 'VueClassComponent',
'vue-property-decorator': 'VuePropertyDecorator',
}
// ...
},
}

---

我注意到这些文件的名称不同，以.common.js和.umd.js结尾

vue-class-component.common.js
vue-property-decorator.umd.js

然后我尝试了

vue.config.js

module.exports = {
configureWebpack: {
// ...
externals: {
vue: 'Vue',
'vue-class-component': 'commonjs2 vue-class-component',
'vue-property-decorator': 'umd vue-property-decorator',
}
// ...
},
}

但并没有那么好用

以下是我如何在src/中导入这些内容。脚本是用打字脚本编写的

import Vue from 'vue'
// ...
import { Component } from 'vue-property-decorator'

---

有人知道如何用.common.js和.umd.js处理webpack中的externals吗？非常感谢！

Answer 1

我认为问题不一定在Webpack配置中。。。

如果我尝试加载https://cdn.jsdelivr.net/npm/vue-class-component@7.2.5，它会给我Original file: /npm/vue-class-component@7.2.5/dist/vue-class-component.common.js，这是CommonJS构建-浏览器无法处理。尝试使用链接到"；浏览器兼容"；构建类似https://cdn.jsdelivr.net/npm/vue-class-component@7.2.6/dist/vue-class-component.min.js

vue-property-decorator应该很好，因为UMD模块应该在浏览器中工作。。。

顺便问一下，这一切有什么意义？为什么不让Webpack自己做呢？最好下载一个大的JS文件，然后再下载多个小的。。。