如何使用typescript从create-react-app构建或导入npm-package

时间:2019-09-26 09:17:46

标签: reactjs typescript npm webpack ecmascript-6

我正在尝试将我的react-project导出为npm软件包。 我正在使用create-react-app构建生产版本。我还关注了这篇(https://medium.com/@revanth0212/how-to-create-and-publish-react-components-using-the-create-react-app-9d60583c2161)文章,将其发布到npm。现在我不知道如何导入导出的类。 我也尝试过nwb构建软件包。我可以从他们的站点构建和导入示例,但是无法编译我的项目。 它使用打字稿

index.js的代码为:

/*jshint esversion: 6 */
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

export {
    DateEditor
}
from './component/editor/DateEditor';

export {
    CellClassProvider
}
from './component/cellClassProvider/CellClassProvider';

export {
    DateEditor
}
from './component/editor/DateEditor';

export {
    TextAreaEditor
}
from './component/editor/TextAreaEditor';

export {
    BooleanFilter
}
from './component/filter/BooleanFilter';

export {
    DateFormatter
}
from './component/formatter/DateFormatter';

export {
    NumberFormatter
}
from './component/formatter/NumberFormatter';

export {
    Formatter
}
from './component/formatter/Formatter';

export {
    BooleanRenderer
}
from './component/renderer/BooleanRenderer';

exports.blub = function () {
    console.log('blub');
};

这不起作用:

import {BooleanRenderer} from 'entitytable'

使用nwb,我会得到这些错误:

 ERROR  in ./src/component/renderer/BooleanRenderer.tsx 4:52
Module parse failed: Unexpected token (4:52)
You may need an appropriate loader to handle this file type.
| import { CommandInvoker } from "../../action/command/CommandInvoker";
|
> export class BooleanRenderer extends React.Component<{ data: any, colDef: any, value: boolean }, { data: any, column: string, value: boolean }> {
|
|     constructor(props: Readonly<{ data: any, colDef: any, value: boolean }>) {
 @ ./src/index.js 29:0-75 29:0-75
 @ multi ./src/index.js

修改

该程序包称为entitytable,并作为工件托管在azure服务器上。 我的主要问题是,我不了解如何导入缩小的程序包。 我使用create-react-app构建它,并将缩小的构建作为npm-package发布在azure服务器上。我可以在另一个项目中使用require('entitytable')导入它。但是我无法导入导出的类(例如DateFormatter)

编辑2

更多错误消息: 在我遵循了以上文章(https://medium.com/@revanth0212/how-to-create-and-publish-react-components-using-the-create-react-app-9d60583c2161)之后,我收到此错误:

./node_modules/entitytable/dist/api/DynamicsApi.ts 6:33
Module parse failed: Unexpected token (6:33)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import DynamicsWebApi from 'dynamics-web-api';
|
> export default class DynamicsApi implements Api {
|     private static readonly WEB_API_URL: string = 'http://172.16.253.54/DRieke/api/data/v8.2/';
|     private readonly dynamicsWebApi = new DynamicsWebApi({ webApiUrl: DynamicsApi.WEB_API_URL, includeAnnotations: "*" });

0 个答案:

没有答案