使用rollup二次封装antdv遇到的打包问题?

问题关键代码如下,如果需要更多再贴出来

<!-- index.vue -->
<template>
  <span>{{ msg }}</span>
  <Button>哈哈</Button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Button } from 'ant-design-vue';

export default defineComponent({
  name: 'Demo',
  props: { msg: String },
  components: { Button }
});
</script>
// rollup.config.js
import { nodeResolve } from '@rollup/plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import commonjs from '@rollup/plugin-commonjs';
import vue from 'rollup-plugin-vue';
import path from 'path';

export default function () {
  return {
    input: path.resolve(__dirname, './packages/index.ts'),
    output: [
      {
        file: path.resolve(__dirname, './dist/index.es.js'),
        format: 'es',
        exports: 'auto'
      }
    ],
    plugins: [
      nodeResolve({
        jsnext: true,
        main: true,
        extensions: ['.ts', '.js', '.json', '.vue']
      }),
      commonjs({
        include: ['node_modules/**', 'node_modules/**/*']
      }),
      vue({
        include: /\.vue$/,
        target: 'browser'
      }),
      typescript({
        useTsconfigDeclarationDir: true
      })
    ],
    external: ['ant-design-vue', 'vue']
  };
}
// package.json
{
  "name": "components-demo",
  "version": "1.0.0",
  "description": "components-demo",
  "main": "dist/index.es.js",
  "module": "dist/index.es.js",
  "files": ["dist"],
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "npm run clean && rollup -c",
    "clean": "rimraf ./dist/*"
  }
}

npm run build之后,进行npm link,在A项目npm link components-demo使用Demo组件无法正常使用,报错如下

这个getPrefixCls我点进去是antdva-button源码中引用了一个文件进来有这个值,问题像是打包之后antdv打包之后的路径引用,我将a-button从上面index.vue中移除就能正常使用(就是说没有引用antdv进行开发)。

使用了a-button打包的文件如下:
image.png

阅读 1.7k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题