Rollup packs g6 with an error #6514
qinfeng0214 posted onGitHub
Describe the bug / 问题描述
基于 element-ui和 antv/g6 4.x 二次封装了一个组件库,G6 的组件直接引入import G6 from '@antv/g6'; 发布 npm 包的时候,如果导出的组件含有使用 g6的组件,其他项目下载使用,浏览器会提示如下错误: main.js:142 TypeError: Class extends value undefined is not a constructor or null at t (tslib.es6.js:35:264) at eval (circle.js:6:180) at Proxy.eval (circle.js:6:831) at ./node_modules/.pnpm/@luban-fe-ui+components@0.1.7/node_modules/@luban-fe-ui/components/dist/esm/node_modules/.pnpm/@antv_g-canvas@0.5.17/node_modules/@antv/g-canvas/esm/shape/circle.js (overview.js:4666:1) at webpack_require (runtime.js:854:30) at fn (runtime.js:151:20) at Proxy.eval (arrow.js:7:74) at ./node_modules/.pnpm/@luban-fe-ui+components@0.1.7/node_modules/@luban-fe-ui/components/dist/esm/node_modules/.pnpm/@antv_g-canvas@0.5.17/node_modules/@antv/g-canvas/esm/util/arrow.js (overview.js:4810:1) at webpack_require (runtime.js:854:30) at fn (runtime.js:151:20)
Reproduction link / 重现链接
No response
Steps to Reproduce the Bug or Issue / 重现步骤
No response
G6 Version / G6 版本
4.x
Operating System / 操作系统
macOS
Browser / 浏览器
Chrome
Additional context / 补充说明
rollup.config.js
import vue from 'rollup-plugin-vue';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import json from '@rollup/plugin-json';
import esbuild from 'rollup-plugin-esbuild';
import postcss from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser'
const config = [
{
// 配置组件库
input: 'packages/components/index.js',
output: [
{
dir: 'packages/components/dist/esm',
format: 'esm', // ES模块
exports: 'named', // 使用命名导出
preserveModules: true, // 保留模块结构
preserveModulesRoot: 'packages/components', // 保留的模块根目录
},
{
dir: 'packages/components/dist/cjs',
format: 'cjs', // cjs模块
exports: 'named', // 使用命名导出
preserveModules: true, // 保留模块结构
preserveModulesRoot: 'packages/components', // 保留的模块根目录
}
],
plugins: [
commonjs(),
vue({
target: 'browser',
preprocessStyles: true,
}),
//
nodeResolve({
extensions: ['.js', '.vue'],
preferBuiltins: false, // 禁用内置模块优先
browser: true, // 适配浏览器环境
}),
json(),
babel({
exclude: 'node_modules/**', // 排除node_modules下的文件
}), // rollup 的 babel 插件,ES6转ES5
postcss({
extensions: ['.css', '.less'],
minimize: true, // 压缩css
use: [
['less', { javascriptEnabled: true }]
]
}),
esbuild(),
terser()
],
external: ['vue', 'vue-router', 'element-ui'],
context: 'window'
}
];
package.json
"@babel/core": "^7.26.0",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-json": "^6.1.0",
"@rollup/plugin-node-resolve": "^15.2.3",
"generate-source-map": "^0.0.5",
"rollup": "4.17.2",
"rollup-plugin-esbuild": "^6.1.1",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-vue": "^5.1.9"