使用Rollup构建SolidJS npm库时遭遇未解析依赖警告

问题根源 #

你的Rollup配置存在3个核心问题，导致出现未解析依赖警告：

1. 插件配置错误：存在未导入的无效resolve()调用，且未使用Rollup专用的PostCSS插件
2. CSS模块处理不当：直接使用原生postcss库无法正确解析.module.css文件
3. 外部依赖匹配不全：@suid/icons-material的子路径导入未被external规则覆盖

修复方案 #

1. 安装缺失依赖 #

先补充Rollup专用的PostCSS插件：

npm install rollup-plugin-postcss --save-dev

2. 修复后的完整配置 #

替换原rollup.config.js内容：

import commonjs from "rollup-plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss"; // 改用Rollup专用PostCSS插件
import nodeResolve from "@rollup/plugin-node-resolve";

export default {
  input: "./src/index.ts",
  output: [
    {
      file: "dist/index.cjs.js",
      format: "cjs",
      sourcemap: true,
    },
    {
      file: "dist/index.esm.js",
      format: "esm",
      sourcemap: true,
    },
  ],
  // 用正则匹配所有@suid生态依赖，覆盖子路径导入
  external: [
    "solid-js",
    "solid-js/web",
    /^@suid\/.*/,
  ],
  plugins: [
    nodeResolve({
      extensions: [".ts", ".tsx", ".js", ".jsx", ".css"], // 显式声明需解析的文件扩展名
      preferBuiltins: false,
    }),
    commonjs(),
    postcss({
      modules: { // 明确启用CSS模块，替代autoModules
        generateScopedName: "[name]__[local]___[hash:base64:5]",
      },
      plugins: [],
      sourceMap: true,
      extract: "dist/styles.css", // 指定提取后的CSS文件名
      minimize: true,
    }),
    typescript({
      tsconfig: "./tsconfig.json",
      useTsconfigDeclarationDir: true,
      compilerOptions: {
        jsx: "preserve",
        jsxImportSource: "solid-js", // 适配SolidJS的JSX编译
      },
    }),
    // 已移除冗余的Babel配置，符合你之前的修改
  ],
};

3. 关键修复点说明 #

• 删除无效的resolve()调用：原配置中plugins里的resolve()未导入，属于笔误，直接移除
• 替换PostCSS插件：rollup-plugin-postcss专门为Rollup设计，能正确识别并处理.module.css文件导入
• 正则匹配外部依赖：/^@suid\/.*/可以覆盖@suid/icons-material/ExpandLess这类子路径导入，避免被标记为未解析
• 显式声明扩展名：在nodeResolve中添加.css，确保Rollup能识别CSS文件的导入逻辑

验证效果 #

重新执行构建命令后，之前的未解析依赖警告会消失，dist目录将生成：

• index.cjs.js：CommonJS格式模块
• index.esm.js：ES格式模块
• styles.css：提取并压缩后的全局CSS文件

内容的提问来源于stack exchange，提问作者Sebastian Edelmeier