如何使用 TSX 组件和 CSS 模块设置 npm 库？

Question

目标是创建一个包含 React 组件和功能的 npm 模块，可以将其导入 NextJS 项目中。问题在于 JS 被捆绑在一个文件中，而不是维护

src/

文件夹结构，并且当导入模块时，函数无法工作（未定义）。

文件夹结构是这样的：

- src
  index.ts
  - components
    testComponent.module.css
    testComponent.tsx
    testReturn.ts

src/index.ts

导出

components/

中的所有内容。在模块中我有这些文件：

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "target": "ESNext",
    "module": "CommonJS",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true,
    "declaration": true,
    "esModuleInterop": true,
    "noEmit": false,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "moduleResolution": "node",
    "plugins": [{ "name": "typescript-plugin-css-modules" }],
    "baseUrl": "./src"
  },
  "include": ["src/**/*"]
}

webpack.config.js

const path = require("path");

module.exports = {
  mode: process.env.NODE_ENV || "development",
  entry: {
    index: "./src/index.ts",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: "ts-loader",
        options: {
          configFile: "tsconfig.json",
        },
      },
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: "[name]__[local]__[hash:base64:5]",
              },
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  }

在 package.json 中我有以下设置：

{
  "name": "testmodule",
  "scripts": {
    "prebuild": "rimraf dist",
    "build": "webpack"
  },
  "main": "dist/index.js",
  "files": [
    "dist"
  ],
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.22",
    "@types/react-dom": "^18.2.7",
    "@types/css-modules": "^1.0.3",
    "ts-loader": "^9.4.4",
    "typescript": "^5.2.2",
    "webpack-cli": "^5.1.4",
    "rimraf": "^5.0.4",
    "css-loader": "^6.8.1",
    "style-loader": "^3.3.3",
    "typescript-plugin-css-modules": "^5.0.1",
    "webpack": "^5.88.2"
  }
}

现在我似乎有两个问题：

1. 所有 JS 都捆绑在

   dist/index.js

   中的 1 个文件中，而我希望它保持

   src/

   文件夹结构。文件夹结构存在，但其中只有

   d.ts

   个文件。
2. 当我尝试导入此库（我使用

   yarn link

   本地链接该库）时，这些函数在 VS Code 中导入时不会出现错误，但在开发服务器（干净的 NextJS 设置）中，它们会给出未定义的错误。

有人能解释一下吗？ 也许 Rollup 更适合这个？

Answer 1

在尝试让 Webpack 完成这项工作几个小时后，我发现 rollup 只需一些小配置即可完成：

import commonjs from "@rollup/plugin-commonjs";
import nodeResolve from "@rollup/plugin-node-resolve";
import postcss from "rollup-plugin-postcss";
import tsConfigPaths from "rollup-plugin-tsconfig-paths";
import typescript from "rollup-plugin-typescript2";
import pkg from "./package.json";

const config = [
  {
    input: "src/index.ts",
    output: {
      preserveModules: true,
      preserveModulesRoot: "src",
      dir: "./dist",
      format: "es",
    },
    external: [...Object.keys(pkg.dependencies || {}), "react/jsx-runtime"],
    plugins: [
      tsConfigPaths(),
      nodeResolve({ extensions: [".tsx", ".ts", ".jsx", ".js", ".json"] }),
      typescript({
        typescript: require("typescript"),
      }),
      commonjs(),
      postcss(),
    ],
  },
];
export default config;

也许 Webpack 可以胜任，但这对我有用。