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

我已经设法做到了 vue 通过使用Webpack配置 externals

首先,我在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'

任何人都知道如何处理 外部 在webpack中 .common.js 和 .umd.js ?非常感谢!