为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕虎7371278 2023-03-18 14:51:40
vue我已经设法通过使用 Webpack 配置来做到这一点externals首先,我在我的 html 文件中包含了 Vue 的 CDN索引.html<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>然后我修改了我的 webpack 配置查看.config.jsmodule.exports = {  configureWebpack: {    // ...    externals: {      vue: 'Vue',    }    // ...  },}一切都很顺利。但是当我尝试使用vue-class-componentand时vue-property-decorator,它并没有像预期的那样工作索引.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>查看.config.jsmodule.exports = {  configureWebpack: {    // ...    externals: {      vue: 'Vue',      'vue-class-component': 'VueClassComponent',      'vue-property-decorator': 'VuePropertyDecorator',    }    // ...  },}我注意到这些文件的名称不同,以.common.js和结尾.umd.jsvue-class-component.common.jsvue-property-decorator.umd.js然后我试了查看.config.jsmodule.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在 webpack 中处理.common.js和.umd.js?非常感谢!
查看完整描述

1 回答

?
慕尼黑5688855

TA贡献1848条经验 获得超2个赞

我认为问题不一定出在 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 文件,然后再下载多个小的……


查看完整回答
反对 回复 2023-03-18
  • 1 回答
  • 0 关注
  • 94 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信