通过`webpack`打包为esm包，`npm link`后包空对象，请问是怎么回事？

Question

请问通过webpack打包为esm包，npm link后包空对象，请问是怎么回事？导出的包有编译，npm link后得到的是{}对象

两个文件metab.ts：

const metab = {aa: 1};

export default metab;

入口文件metas.ts引入metab.ts：

import metab from "./metab";

const metas = metab;
export default metas;

这样打包后npm link，在其他项目里导入metas.ts，得到是一个空对象{}，如果我把metas.ts去掉import，直接写上值可以得到结果

const metas = {aa: 1};
export default metas;

请问不能import是怎么回事呢？我的webpack配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

// 根据环境变量，判断当前是否为生产模式。
const isProduction = process.env.NODE_ENV === 'production';

// 读取当前的输出格式（UMD/ESM）
const outputType = process.env.OUTPUT_TYPE;

/** @type {import('webpack').Configuration} */
const config = {
    // 打包输出 ESM 格式文件，最终要输出多个文件，便于实现按需加载，因此设置为多入口
    entry: outputType === 'esm' ? {
        metas: './src/calc/metas.ts'
    } : (
        isProduction ? './src/calc/index.ts' : './src/index.ts'
    ),

    // 由于输出 ESM 格式文件为 Webpack 实验特性，因此需要加上此配置。
    experiments: {
        outputModule: outputType === 'esm'
    },

    // 根据环境变量决定
    mode: isProduction ? 'production' : 'development',

    // Babel与TS配置
    module: {
        rules: [
            {
                exclude: /node_modules/,
                test: /\.ts(x?)$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [['@babel/preset-env']]
                        }
                    },
                    { loader: 'ts-loader' }
                ]
            }
        ]
    },

    // 针对不同的环境变量，执行不同的打包动作。
    output: outputType === 'esm' ? {
        chunkFormat: 'module',
        clean: true,
        filename: '[name].esm.js',
        library: {
            type: 'module'
        },
        path: path.resolve(__dirname, 'es')
    } : {
        clean: true,
        filename: 'index.js',
        globalObject: 'globalThis',  // 设置全局对象为 globalThis，使库同时兼容 Node.js 与浏览器环境。
        library: {
            export: 'default',  // 指定将入口文件的默认导出作为库暴露。
            name: 'calc',       // 指定库名称
            type: 'umd'         // 输出的模块化格式， umd 表示允许模块通过 CommonJS、AMD 或作为全局变量使用。
        },
        path: path.resolve(__dirname, 'lib')
    },

    plugins: [
        // 引入 html-webpack-plugin，只需在开发环境时使用。
        ...(!isProduction ? [new HtmlWebpackPlugin()] : [])
    ],

    // 使路径查找时，支持省略文件名的ts后缀
    resolve: {
        extensions: ['.js', '.json', '.jsx', '.ts', '.tsx']
    }
};

module.exports = config;

Answer 1

找到解决办法了，esm，导出的方式为export {} https://zhuanlan.zhihu.com/p/40733281