reactjs - 如何使用 TSConfig 将 React 组件编译成串联文件进行打包？

Question

我正在尝试将一些 React 组件连接到一个文件中，该文件可以作为 npm 包导入到 Angular 项目中。react2angular然后用于从这个插件连接到组件。

通过 VSCode 使用 tsconfig（不是 webpack）来编译所有内容。使用 tsconfig 选项，但尚未找到正确的组合。研究不同的错误并没有给我任何可行的解决方案。

package.json（项目的根目录）

"name": "@atum",
  "version": "1.0.0",
  "main": "lib/index.js",
  "typings": "lib/index.d.ts",
  "scripts": {
    "build": "tsc",
    "start": "tsc -w"
  }

tsconfig.json（项目的根目录）

  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "jsx": "react",
    "declaration": true,
    "outDir": "./lib",
    "moduleResolution": "node",
    "esModuleInterop": true, 
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/*", "src/**/*", "src/**/**/*"],
  "exclude": ["node_modules", "src/test", "src/**/__test__", "src/**/**/__test__"]

入口文件是src/index.ts，但我在 tsconfig 中没有看到将其标记为入口点的选项。相反，我假设它包含include在 tsconfig 的选项中。

import Root from './root.component';
import { Button, TextField } from './common/components';

export { Root, Button, TextField };

export default {
  Root,
  Button,
  TextField
};

使用将"module": "commonjs"所有未连接的文件输出到lib输出文件夹中。这主要在我使用这个新包启动 Angular 应用程序时起作用，但我想要一个文件。启动时 VSCode 终端中的唯一错误是Module not found: Error: Can't resolve 'react-hook-form' in file. （我可以看到这个插件在项目的“node_modules”文件夹中。）

使用"module": "amd"with"outFile": "lib/index.js"会生成一个 index.js 文件（+ index.d.ts），但是当我使用这个包启动 Angular 应用程序时，我在 VSCode 终端中收到这些错误：

ERROR in ../{local}/atum/lib/index.js
Module not found: Error: Can't resolve './icomoon.eot' in '{local}/atum/lib'

ERROR in ../{local}/atum/lib/index.js
Module not found: Error: Can't resolve './icomoon.svg' in '{local}/atum/lib'

ERROR in ../{local}/atum/lib/index.js
Module not found: Error: Can't resolve './icomoon.ttf' in '{local}/atum/lib'

ERROR in ../{local}/atum/lib/index.js
Module not found: Error: Can't resolve './icomoon.woff' in '{local}/atum/lib'

ERROR in ../{local}/atum/lib/index.js
Module not found: Error: Can't resolve 'common/helpers/date' in '{local}/atum/lib'

ERROR in ../{local}/atum/lib/index.js
Module not found: Error: Can't resolve 'common/helpers/index' in '{local}/atum/lib'

ERROR in ../{local}/atum/lib/index.js
Module not found: Error: Can't resolve 'common/index' in '{local}/atum/lib'

ERROR in ../{local}/atum/lib/index.js
Module not found: Error: Can't resolve 'components/Modals/index' in '{local}/atum/lib'

ERROR in ../{local}/atum/lib/index.js
Module not found: Error: Can't resolve 'models/Categories/ICategory' in '{local}/atum/lib'

ERROR in ../{local}/atum/lib/index.js
Module not found: Error: Can't resolve 'react-hook-form' in '{local}/atum/lib'

使用"module": "system"with"outFile": "lib/index.js"会生成一个 index.js 文件（+ index.d.ts），并且 Angular 应用程序启动时没有错误。但是当我在浏览器中查看 Angular 应用程序时，我在 Web 控制台中收到以下错误：

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

在连接所有内容之前，字体文件已经有自己的 fonts.d.ts 文件。而且我也尝试将其添加到 tsconfig 中，但没有成功：

"baseUrl": "src",
"paths": {
  "*": ["src/*"]
}

标签： reactjstsconfig