已发布NPM库调用异常：引入后返回空对象问题求助

问题描述 #

使用ToolJet开发报表模板，已成功构建部署至Netlify等平台，但打包为NPM库发布后，在其他项目中引入时返回空对象。示例代码：

import * as props from 'my-library-name';

function Demo() {
  console.log("props", props); // 控制台输出空对象
}

曾尝试用Rollup构建，问题未解决，目标是导出项目中多个模块、组件与函数，发布为可正常调用的NPM库。

排查与解决步骤 #

1. 检查Package.json入口配置 #

• 确认main、module、exports字段是否正确指向打包产物：
  • main对应CommonJS格式产物（如dist/index.cjs.js）
  • module对应ES模块格式产物（如dist/index.esm.js）
  • 推荐配置exports字段明确多环境入口，示例：

    "exports": {
      ".": {
        "import": "./dist/index.esm.js",
        "require": "./dist/index.cjs.js"
      }
    }
    

• 验证打包产物是否存在于指定路径，且文件内容包含正确导出语句。

2. 修正Webpack库模式配置 #

若用Webpack打包，必须配置output.library确保库正确暴露：

module.exports = {
  output: {
    library: 'MyLibrary',
    libraryTarget: 'umd', // 同时支持CommonJS、ES模块等格式
    umdNamedDefine: true,
    filename: 'index.[format].js'
  },
  externals: {
    // 排除React等第三方依赖，避免打包冗余代码
    react: 'react',
    'react-dom': 'react-dom'
  }
};

3. 确认入口文件导出逻辑 #

确保index.js显式导出所有需要暴露的内容：

// 导出组件
export { default as ReportTemplate } from './components/ReportTemplate';
// 导出工具函数
export { generateReportData } from './utils/reportUtils';
// 导出整个模块
export * from './modules/chartModule';

避免默认导出与命名导出混用导致的兼容问题，所有需暴露内容必须显式声明。

4. 检查Babel配置 #

确保Babel保留ES模块语法，不破坏导出语句：

{
  "presets": [
    ["@babel/preset-env", { "modules": false }], // 交由打包工具处理模块转译
    "@babel/preset-react"
  ]
}

5. 优化Rollup配置（若使用Rollup） #

调整Rollup配置以正确处理导出与模块格式：

export default {
  input: 'src/index.js',
  output: [
    { file: 'dist/index.cjs.js', format: 'cjs' },
    { file: 'dist/index.esm.js', format: 'es' }
  ],
  external: ['react', 'react-dom'],
  plugins: [
    require('@rollup/plugin-babel')({ babelHelpers: 'bundled' }),
    require('@rollup/plugin-node-resolve')(),
    require('@rollup/plugin-commonjs')()
  ]
};

6. 本地验证测试 #

• 用npm link在本地测试库的可用性：
  1. 库项目执行npm link
  2. 测试项目执行npm link my-library-name
  3. 运行测试项目，检查控制台输出是否正常
• 直接查看打包产物文件，确认其中包含预期的导出语句。

内容的提问来源于stack exchange，提问作者Chinmay Patil