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

作者站长头像
站长
· 阅读数 5

请问通过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;
回复
1个回答
avatar
test
2024-06-23

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

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容