React TypeScript -导出多个组件

Question

给定文件夹结构:

├──components/
|  └─Elements/
|    └─Button/
|    └─Input/
|    └─index.ts
|  └─Home/
|    └─home.tsx

我想导出Button和Input，这样我就可以从home组件访问它们:

home.tsx

import { Button, Input } from '@elements/'

我已经试过了:

索引。ts(在Elements文件夹中)

export { Button } from './Button/button';
export { Input } from './Input/input';

但它不工作，我得到:Cannot find module '@elements/' or its corresponding type declarations.即使解析别名确实工作。

tsconfig.json

{
"compilerOptions": {
"outDir": "../public",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"baseUrl": "./",
"rootDir": "./",
"typeRoots": ["./node_modules/@types", "./src/@types"],
"paths": {
"@src/*": ["src/*"],
"@images/*": ["src/images/*"],
"@styles/*": ["src/styles/*"],
"@components/*": ["src/components/*"],
"@elements/*": ["src/components/Elements/*"],
},
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"importsNotUsedAsValues": "preserve"
},
"exclude": ["node_modules", "webpack"]
}

webpack.config.babel.js

...
resolve: {
alias: [
'@src': join(rootDir, '/src'),
'@images': join(rootDir, '/src/images'),
'@assets': join(rootDir, '/src/assets'),
'@styles': join(rootDir, '/src/styles'),
'@components': join(rootDir, '/src/components'),
'@elements': join(rootDir, '/src/components/Elements')
]
extensions: ['.tsx', '.ts', '.js', '.jsx']
},

Answer 1

我找到了解决方案，从tsconfig.json上的path声明中删除*

"@elements/*": ["src/components/Elements/"]

而不是

"@elements/*": ["src/components/Elements/*"]

然后使用 导入

import { Button, Input } from '@elements/'

或

"@elements": ["src/components/Elements"]

import { Button, Input } from '@elements'

Answer 2

import { Button } from './Button/button';
import { Input } from './Input/input';

应该是

export { Button } from './Button/button';
export { Input } from './Input/input';

如果它们是默认导出，则必须这样做。

export { default as Button } from './Button/button';
export { default as Input } from './Input/input';

Answer 3

Module resolution是编译器用来判断import指向什么的过程。你可以在Typescript手册中阅读更多关于module resolution的内容。

import { Button } from './Button/button';

这种类型的导入称为relative import。相对导入是以/、。/或../开头的导入。

其他任何导入都被认为是非相对的。一些例子包括:

import * as $ from "jquery";
import { Component } from "@angular/core";

---

typescript有两种模块解析策略，分别是node和classic。默认情况下，模块分辨率设置为classic。

将模块分辨率设置为node将解决您的问题。

"moduleResoution": "node"

注意:节点模块解析是TypeScript社区中最常用的，并且推荐用于大多数项目。如果你在TypeScript的导入和导出中遇到了解决问题，试着设置moduleResolution: "node"，看看它是否能解决这个问题。