如何使用 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 and .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 处理 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 构建 - 浏览器不会处理它。尝试将 link 用于“浏览器兼容”构建，例如 https://cdn.jsdelivr.net/npm/vue-class-component@7.2.6/dist/vue-class-component.min.js

vue-property-decorator 应该没问题，因为 UMD module 应该在浏览器中工作...

顺便说一句，这一切的意义何在？为什么不让 Webpack 做它的事情呢？最好先下载一个大的 JS 文件，然后再下载多个小的...

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

How to exclude CommonJS libs from production build with Webpack (vue-cli)

javascript

typescript

webpack

vue.js

vue-cli