我正在尝试用 Typescript 编写一个库,我想在其他各种 Typescript 或 JS 项目中使用它。所有这些其他项目都在浏览器中运行。
我的 Typescript lib 项目有多个文件,每个文件都是一个 React 组件,有 1 个类和 1-2 个接口(interface)(Component + Props + State,对于熟悉 React 的人来说)。
我希望其他项目可以将我的组件库作为 AMD 模块导入,并且我希望将所有已编译的 JS 代码作为库构建过程的一部分捆绑在一个文件中。
到目前为止,我已经设法设置好所有内容,以便我的库可以编译。我已经使用以下选项设置了编译器:jsx: "react", declaration: true, module: "amd"
为 lib 生成的代码如下所示:
define("epb-widget/WidgetItemNav", ["require", "exports", "react"], function (require, exports, React) {
"use strict";
exports.WidgetItemNav = ...;
});
define("epb-widget/WidgetItemInfo", ["require", "exports", "react"], function (require, exports, React) {
"use strict";
exports.WidgetItemInfo = ...;
});
define("epb-widget/WidgetItem", ["require", "exports", "react", "epb-widget/WidgetItemNav", "epb-widget/WidgetItemInfo"], function (require, exports, React, WidgetItemNav_1, WidgetItemInfo_1) {
"use strict";
exports.WidgetItem = ...;
});
define("epb-widget/WidgetOptions", ["require", "exports", "react"], function (require, exports, React) {
"use strict";
exports.WidgetOptions = ...;
});
define("epb-widget/Widget", ["require", "exports", "react", "epb-widget/WidgetItem", "epb-widget/WidgetOptions"], function (require, exports, React, WidgetItem_1, WidgetOptions_1) {
"use strict";
exports.Widget = ...;
});
define("epb-widget", ["require", "exports", "epb-widget/Widget", "epb-widget/WidgetItem", "epb-widget/WidgetItemInfo", "epb-widget/WidgetItemNav", "epb-widget/WidgetOptions"], function (require, exports, Widget_1, WidgetItem_2, WidgetItemInfo_2, WidgetItemNav_2, WidgetOptions_2) {
"use strict";
exports.Widget = Widget_1.Widget;
exports.WidgetItem = WidgetItem_2.WidgetItem;
exports.WidgetItemInfo = WidgetItemInfo_2.WidgetItemInfo;
exports.WidgetItemNav = WidgetItemNav_2.WidgetItemNav;
exports.WidgetOptions = WidgetOptions_2.WidgetOptions;
});
有很多 AMD 模块符合我的口味,但我可以接受。生成的代码看起来运行良好。
生成的 .d.ts
文件如下所示:
declare module "epb-widget/WidgetItemNav" {
import * as React from "react";
export interface WidgetItemNavProps {
...
}
export class WidgetItemNav extends React.Component<WidgetItemNavProps, void> {
...
}
}
declare module "epb-widget/WidgetItemInfo" {
export interface WidgetItemInfoProps {
...
}
export const WidgetItemInfo: (props: WidgetItemInfoProps) => JSX.Element;
}
declare module "epb-widget/WidgetItem" {
export interface WidgetItemProps {
...
}
export const WidgetItem: (props: WidgetItemProps) => JSX.Element;
}
declare module "epb-widget/WidgetOptions" {
import * as React from "react";
export interface WidgetOptionsProps {
...
}
export interface WidgetOptionsState {
...
}
export class WidgetOptions extends React.Component<WidgetOptionsProps, WidgetOptionsState> {
...
}
}
declare module "epb-widget/Widget" {
import * as React from "react";
import { WidgetItemProps } from "epb-widget/WidgetItem";
export interface WidgetProps {
...
}
export interface WidgetState {
...
}
export class Widget extends React.Component<WidgetProps, WidgetState> {
...
}
}
declare module "epb-widget" {
export { Widget, WidgetProps } from "epb-widget/Widget";
export { WidgetItem, WidgetItemProps } from "epb-widget/WidgetItem";
export { WidgetItemInfo, WidgetItemInfoProps } from "epb-widget/WidgetItemInfo";
export { WidgetItemNav, WidgetItemNavProps } from "epb-widget/WidgetItemNav";
export { WidgetOptions, WidgetOptionsProps } from "epb-widget/WidgetOptions";
}
同样,这看起来很合理。这都是 Typescript 编译器直接输出的。
最后,这个库是一个npm模块,它的package.json
是这样的
{
"name": "epb-widget",
"version": "1.0.0",
"description": "...",
"main": "./dist/index.js",
"typings": "./dist/index",
"globalDependencies": {...},
"devDependencies": {...}
}
但这就是问题所在
当我尝试在我的一个项目中使用该库时,它实际上不起作用。
我只是尝试像这样导入类:
import {Widget, WidgetProps, WidgetItem} from "epb-widget";
但是 typescript 编译器抛出以下错误
error TS2656: Exported external package typings file '.../node_modules/epb-widget/dist/index.d.ts' is not a module. Please contact the package author to update the package definition.
老实说,我不知道我应该在这里做什么。 index.d.ts
是由 tsc
生成的,我不确定为什么同样的 tsc
不能在另一个项目。
最佳答案
这太长了,无法进入我们上面的讨论,但这是我的 TL;DR 创建一个库:
创建一个
index.ts
重新导出库中公开的定义,例如export * from './API' export * from './Decorators' ...
使用
--declaration
标志编译库文件以自动生成类型- 在
package.json
中添加一个typings
条目指向生成的index.d.ts
文件
使用库:
- 像任何其他库一样将其放入
node_modules
文件夹 - 只需
import * as mylib from 'mylib'
:它将自动导入所有导出的定义和类型
这个过程在 commonjs
上工作得很好,据我所知,在 systemjs
上也能正常工作。我不知道 amd
,而且你生成的类型看起来和我的很不一样:
生成的 index.d.ts
通常看起来像
export * from './API';
export * from './Decorators';
...
API.d.ts
文件通常看起来像
import * as stream from 'stream';
import * as net from 'net';
import * as url from 'url';
export interface Factory {
end(): Promise<void>;
}
export interface ChannelFactory extends Factory {
getChannel(name: string, closeListener?: () => void): Promise<Channel>;
existsChannel(name: string): Promise<boolean>;
}
....
关于typescript - 错误 TS2306 : '...index.d.ts' is not a module,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39276023/