问题关键代码如下,如果需要更多再贴出来
<!-- 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
我点进去是antdv
的a-button
源码中引用了一个文件进来有这个值,问题像是打包之后antdv
打包之后的路径引用,我将a-button
从上面index.vue
中移除就能正常使用(就是说没有引用antdv
进行开发)。
使用了a-button打包的文件如下: