javascript - 具有许多子模块的打字稿项目

Question

我有一个项目，我的目标非常简单，将其公开为包含类型定义的库。

实际上，这个项目在没有它的情况下编译并且运行良好，打字稿编译器也可以导出所有定义。

为了理解我的问题，让我介绍该项目的一小部分，以使这里的事情更简单。

项目结构

project root
│   tsconfig.json
│   package.json
│   ...  
│
└─── src
│   │
│   │ index.ts
│   └── Elements
│   │   │ Elements.ts
│   │   │ package.json
│   │   │
│   │   └── Button
│   │   │ Button.tsx
│   │   │ package.json
│   │   │
│   │   └── Toast
│   │   │ Toast.tsx
│   │   │ package.json
│   │   │
│   └── Forms
│   │   │ Forms.ts
│   │   │ package.json
│   │   │
│   │   └── InputText
│   │   │ InputText.tsx
│   │   │ package.json
│   │   │
│   │   └── DatePicker
│   │   │ DatePicker.tsx
│   │   │ package.json

通常，package.json一个类别中的所有文件如下所示：

{
  "name": "category-or-component-name",
  "version": "0",
  "main": "CategoryOrComponent.ts",
  "types": "CategoryOrComponent.ts"
}

类别

在 内部src，有一些组件“类别”，每个类别都包含一个package.json、一个{CategoryName}.ts文件和一个组件列表。

一个类别实现，如下所示：

export { default as Button } from './Button'
export { default as Toast } from './Toast'

成分

这里没有太多秘密，每个组件都有其正确的实现，Component.tsx并且每个组件文件夹中的文件与在类别中创建package.json的文件几乎相同。package.json

这里是一个组件示例：

import * as React from 'react'

export interface Props {
  children?: string | JSX.Element;
}

export default class Button extends React.PureComponent<Props, {}> {
  public render (): JSX.Element {
    const { children } = this.props
    return (
      <button>{children}</button>
    )
  }
}

输出

将源导出为 lib 后，typscript 提供如下类型定义。

project root
│   tsconfig.json
│   package.json
│   ...  
│
└─── lib
│   │
│   │ index.d.ts
│   └── Elements
│   │   │ Elements.d.ts
│   │   │
│   │   └── Button
│   │   │ Button.d.ts
│   │   │
│   │   └── Toast
│   │   │ Toast.d.ts
│   │   │
│   └── Forms
│   │   │ Forms.d.ts
│   │   │
│   │   └── InputText
│   │   │ InputText.d.ts
│   │   │
│   │   └── DatePicker
│   │   │ DatePicker.d.ts

定义

永远不会加载类别和组件中的定义，因为.d.ts文件不指向.d.ts文件，而是指向文件夹。

让我们看一个定义的例子：

export interface Props {
  children?: string | JSX.Element;
}

export default class Button extends React.Component<Props, {}> {
  static defaultProps: Partial<Props>;
  private handleOnClick;
  private handleOnMouseOver;
  private handleOnMouseOut;
  private handleOnTouchStart;
  private handleOnTouchEnd;
  render(): JSX.Element;
}

问题

在导入某些资源时生成的任何.d.ts文件都指向如下文件夹：

import Button from './Elements/Button'

这意味着该库的使用者永远不会找到该Button.d.ts文件，因为package.json它里面没有。

工作，src因为每个文件夹都有一个package.json文件。这里file的职责package.json就是向node和typescript指明索引文件是谁，就这么简单。

所以我的问题是，tsc捆绑中有一些功能或者可能是为了提高模块分辨率？

谢谢

标签： javascripttypescriptwebpackecmascript-6