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'

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

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 module应该可以在浏览器中工作...

顺便说一句，这一切有什么意义？为什么不让Webpack发挥作用？总是最好下载一个大JS文件，然后再下载多个小文件。

如何使用Webpack（vue-cli）从生产版本中排除CommonJS库

1 个答案: