antvis / G6

♾ A Graph Visualization Framework in JavaScript.
https://g6.antv.antgroup.com/
MIT License
11.16k stars 1.33k forks source link

Rollup packs g6 with an error #6514

Closed qinfeng0214 closed 1 week ago

qinfeng0214 commented 1 week ago

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"
qinfeng0214 commented 1 week ago

已解决,打包的时候,把g6 排除,下载组件库使用的项目,下载 g6