解决 import 导入 umd 模块报错的问题

在写组件库时用vue-cli 3.x的

vue-cli-service build --target lib --name index [entry]

可以直接构建npm包，npm publish后再通过npm install [name]安装引用一点问题都没有
但是如果是直接在本地引入

import Ea from '../lib/index.umd.js';

没有进行额外配置不出意外是会报错的

这个问题困扰我很久，直到今天看到 Webpack模块引用中还有什么坑？ 这篇文章才知道原因找到解决方式
这里需要用到 @babel/plugin-transform-modules-umd

npm install --save-dev @babel/plugin-transform-modules-umd

然后在babel.config.js添加这个plugin

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  plugins: ['@babel/plugin-transform-modules-umd'], //添加这行
};

好了，终于不用每次构建都npm publish生成许多无意义version去实测了

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_6440