我需要从 Vue.js 中的 bundle webpack 中排除 js 库

Posted

技术标签:

【中文标题】我需要从 Vue.js 中的 bundle webpack 中排除 js 库【英文标题】:I need to exclude js library from bundle webpack in Vue.js 【发布时间】:2020-08-17 04:07:59 【问题描述】:

我需要从 webpack 生成的 bundle 文件中排除一个个人 js 库。 我的库位于 .src/assets/dkv_vueDocumentXRM.js。

我的 App.vue 文件像这样导入库:

import * as XRM from ‘dkv_vueDocumentoXRM’;

然后我将在我的 App.vue 中使用从 dkv_vueDocumentXRM.js 导出的函数,如下所示:

XRM.aFunction();

为了从 bundle 中排除这个库,我在 vue.config.js 中以这种方式将其声明为外部:

externals: 
    dkv_vueDocumentoXRM: path.resolve(__dirname, "src/assets/dkv_vueDocumentoXRM.js"), 

但我在构建时遇到此错误:

来自 Terser 的 dkv_VueDocumento.js 意外令牌:punc (:) [external "C://SOURCES//Vue//document-explorer//src//assets//dkv_vueDocumentoXRM.js":1,0][dkv_VueDocumento.js:654,18] 这个编译错误:ERROR Failed to compile with 1 errors 18:37:47

未找到此依赖项:

** ./node_modules/cache-loader/dist/cjs.js??ref–12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs 中的 dkv_vueDocumentoXRM。 js??ref–0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&*

要安装它,你可以运行:npm install --save dkv_vueDocumentoXRM

网上没有太多关于如何做到这一点的信息。 请帮忙。

【问题讨论】:

【参考方案1】:

你尝试过延迟加载吗?

XRM = () => import('./my-component')

这样调用时会加载库/组件

【讨论】:

感谢您的回复,但是按照您描述的方式,我的库 dkv_vueDocumentoXRM.js 在构建项目时也将被捆绑和缩小。不想要这种行为。我希望这个文件不要被缩小。

以上是关于我需要从 Vue.js 中的 bundle webpack 中排除 js 库的主要内容,如果未能解决你的问题,请参考以下文章

在 vue js 中的基于 Web 的 html 脚本中导入 js 文件时出现 CORS 错误

如何从 Vue Web 应用程序中的 Firebase 存储下载文件?

Ngrok不会更改Web客户端中的localhost

如何正确使用 vue js Web 组件内部的插槽并应用样式

从 Vue js 中的模态提交表单

vue.js http 获取 web api url 渲染列表