vue-cli4 打包组件库 umd.js 文件 在vue-cli2中无法引用?

作者站长头像
站长
· 阅读数 10

问题描述

vue-cli4 打包组件库 umd.js 文件 在vue-cli2中无法引用

问题出现的环境背景及自己尝试过哪些方法

vue-cli4 打包组件库生成umd.js 文件1、在vue-cli4 中 import 可正常导入使用

2、在vue-cli2 中无法引用,报错如下:

vue-cli4 打包组件库   umd.js 文件  在vue-cli2中无法引用?

尝试:在babel 配置中修改如下:

vue-cli4 打包组件库   umd.js 文件  在vue-cli2中无法引用?

再次启动报错如下:

vue-cli4 打包组件库   umd.js 文件  在vue-cli2中无法引用?

相关代码

粘贴代码文本(请勿用截图)

main.js 代码

import KElement from 'kk-element'
console.log(KElement)

你期待的结果是什么?实际看到的错误信息又是什么?

期待正常导入

疑问

是哪里的babel 配置不正确呢 大家帮忙看看 感谢

回复
1个回答
avatar
test
2024-07-11

你的umd 产物代码还含有es6语法

{
  install,
  // 具体的组件列表
  ...components // this line
}

重新检查一下配置,重新打包发布。

或者你可能并不在意含有es6代码,那你可以直接配置noParse 跳过它

// webpack.base.conf.js
 module: {
    noParse: /kk-element/, // this line
    rules: [...]
}

或者你希望在已经加入babel 编译的情况下,不要有

"export 'default' (imported as 'KElement') was not found in 'kk-element'

那你可以

// .babelrc
{
  "presets": [
    ["env", {
      "modules": 'commonjs', // this line , but not recommend
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容