rollup做组件开发时编译es出现export提升问题

• Z时代
• 2024-03-08
• 分类：IT

import CollapsePanel from './src/Panel';
import Collapse from './src/Collapse';
import { collapseProps, panelProps } from './src/commonProps';
Collapse.Panel = CollapsePanel;
export { collapseProps, panelProps };
export default Collapse;

编译后生es module代码如下

import o from "./src/Panel.js";
import r from "./src/Collapse.js";
export {default} from "./src/Collapse.js";
export {collapseProps, panelProps} from "./src/commonProps.js";
r.Panel = o;

因为生成后的 r.Panel =0 在底部，当页面加载组件时再经过一次vite编译时会被treeshaking 导致 Panel 失效

以下是我rollup配置

import path from 'path'
import nodeResolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import json from '@rollup/plugin-json'
import replace from '@rollup/plugin-replace';
import alias from '@rollup/plugin-alias'
import babel from '@rollup/plugin-babel'
import vue from 'rollup-plugin-vue'
import multiInput from 'rollup-plugin-multi-input';
import staticImport from 'rollup-plugin-static-import';
import {DEFAULT_EXTENSIONS} from '@babel/core';
import {terser} from "rollup-plugin-terser"
import pkg from './package.json';
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
export default {
    input: ['src/**/*.js',
        'src/**/*.jsx',
        '!src/**/demos',
        '!src/**/style',
        '!src/style.js',
        '!src/**/*.d.ts',
        '!src/components.js',
        '!src/**/__tests__'],
    output: [
        {
            dir: path.resolve(__dirname, 'es'),
            entryFileNames: `[name].js`,
            chunkFileNames: '_chunks/dep-[name].js',
            name: 'ant-design-vue',
            format: 'esm',
            sourcemap: false,
            hoistTransitiveImports: false,
            manualChunks(id){
                if(id.includes('/node_modules/')){
                    return 'vendor'
                }
                if(id.includes('/_util/')){
                    return 'util'
                }
            }
        },
        {
            dir: path.resolve(__dirname, 'lib'),
            entryFileNames: `[name].js`,
            chunkFileNames: '_chunks/dep-[name].js',
            exports: 'named',
            format:'cjs',
            sourcemap: false,
            hoistTransitiveImports: false,
            manualChunks(id){
                if(id.includes('/node_modules/')){
                    return 'vendor'
                }
                if(id.includes('/_util/')){
                    return 'util'
                }
            }
        },
    ],
    onwarn(warning, warn) {
        // node-resolve complains a lot about this but seems to still work?
        if (warning.message.includes('Package subpath')) {
            return
        }
        // we use the eval('require') trick to deal with optional deps
        if (warning.message.includes('Use of eval')) {
            return
        }
        if (warning.message.includes('Circular dependency')) {
            return
        }
        warn(warning)
    },
    external: ['vue', '@ant-design/icons/lib/dist', '@babel/runtime', '@ant-design/icons', '@ant-design/icons-vue', 'moment'],
    plugins: [
        multiInput(),
        nodeResolve({extensions: ['.js', '.jsx']}),
        commonjs(),
        vue({
            defaultLang: {script: 'es'}
        }),
        babel({
            babelHelpers: 'runtime',
            exclude: /^(.+\/)?node_modules\/.+$/,
            extensions: [...DEFAULT_EXTENSIONS, '.vue'],
        }),
        alias({
            entries: {
                '@': path.resolve(__dirname, 'src'),
            }
        }),
        replace({
            preventAssignment: true,
            values: {
                'VERSION':JSON.stringify(pkg.version) ,
                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
                'process.env.TEST_IE': false,
            }
        }),
        staticImport({include: ['src/**/*.less', 'src/**/*.jpg', 'src/**/*.gif']}),
        json(),
        IS_PROD && terser()
    ].filter(Boolean)
}

以上是 rollup做组件开发时编译es出现export提升问题 的全部内容， 来源链接： utcz.com/p/937328.html