美文网首页程序员
解决 import 导入 umd 模块报错的问题

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

作者: asseek | 来源:发表于2019-11-14 14:23 被阅读0次

    在写组件库时用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';
    

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


    直接import报错

    这个问题困扰我很久,直到今天看到 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去实测了

    相关文章

      网友评论

        本文标题:解决 import 导入 umd 模块报错的问题

        本文链接:https://www.haomeiwen.com/subject/atdrictx.html