将npm链接的React JSX项目/模块导入AngularJS TypeScript模块不起作用

Question

我正在研究可以在React应用程序中使用的概念验证示例React框架/库，以及围绕它的AngularJS框架包装器，以便它也可以用作AngularJS框架/库。

有2个项目：

样品反应的框架

sample-react-framework-wrapper（AngularJS项目）

现在，我有一个npm链接，指向sample-react-framework-wrapper项目中的sample-react-framework项目。

sample-react-framework具有3个组成部分-导航栏，横幅和侧面菜单。 这些组件是.jsx文件。

sample-react-framework-wrapper也具有3个组件-相同的3个-只是呈现React元素的.ts包装器。

我正在尝试将我的React JSX模块导入TypeScript模块，它似乎正在工作，但是无论如何最终都会引发错误：

webpack result is served from http://localhost:8090/assets
content is served from C:\workspaces\UI\sample-react-framework-wrapper
10% 0/1 build modulests-loader: Using typescript@1.6.2
Hash: c4f0160d96f95001f727
Version: webpack 1.12.2
Time: 3233ms
              Asset     Size  Chunks             Chunk Names
sample.framework.js  42.5 kB       0  [emitted]  main
chunk    {0} sample.framework.js (main) 39.6 kB [rendered]
    [0] ./src/components/index.ts 112 bytes {0} [built]
    [1] ./src/components/banner/banner.ts 2.44 kB {0} [built] [1 error]
    [3] ../sample-react-framework/src/index.js 862 bytes {0} [built]
    [4] ../sample-react-framework/src/components/banner/banner.jsx 8.64 kB {0} [built]
    [5] ../sample-react-framework/~/classnames/index.js 1.12 kB {0} [built]
    [6] ../sample-react-framework/src/components/side-menu/side-menu.jsx 11.7 kB {0} [built]
    [7] ../sample-react-framework/src/components/navigation/navigation.jsx 9.81 kB {0} [built]
    [8] ./src/components/navigation/navigation.ts 2.37 kB {0} [built] [1 error]
   [10] ./src/components/side-menu/side-menu.ts 2.44 kB {0} [built] [1 error]
     + 2 hidden modules

ERROR in ./src/components/side-menu/side-menu.ts
(7,26): error TS2307: Cannot find module 'sample-react-framework'.

ERROR in ./src/components/navigation/navigation.ts
(7,28): error TS2307: Cannot find module 'sample-react-framework'.

ERROR in ./src/components/banner/banner.ts
(6,24): error TS2307: Cannot find module 'sample-react-framework'.

如果您在上面看，您会看到它能够正常进入并构建JSX文件-但仍然会引发错误，最终无法找到我的框架。

我尝试了与谷歌搜索不同的事情，例如将path.join(__dirname, 'node_modules')设置为我的path.join(__dirname, 'node_modules') -但也失败了（尝试了此问题： https : //github.com/ webpack / webpack / issues / 784 ）

不幸的是，我现在还不确定还可以尝试什么：(

这是我如何定义JSX类的示例：

import React from 'react';
import classNames from 'classnames';

import SideMenu from '../side-menu/side-menu';

class Banner extends React.Component {

}

module.exports = Banner;

和TS模块：

/// <reference path="../../../typings/angularjs/angular.d.ts" />
/// <reference path="../../../typings/react/react.d.ts" />

import * as React from 'react';

import { Banner } from 'sample-react-framework';

angular
    .module('sampleFramework.banner', [])
    .directive('bannerComponent', bannerComponent);

function bannerComponent() {
    return {
        restrict: 'E',
        scope: {
            banner: '=',
            links: '='
        },
        replace: true,
        ...
    }
}

有谁知道这可能是什么原因？

Answer 1

我还发布了一个问题，以寻求有关ts-loader项目的GitHub问题的帮助： https : //github.com/TypeStrong/ts-loader/issues/72

jbrantly迅速回了我，并通知我，问题是我需要为我的react框架定义一个类型文件，以便TypeScript理解它-糟糕！

从您的SO问题：

 import { Banner } from 'sample-react-framework'; 

这里的错误是TypeScript说它不理解sample-react-framework。 TypeScript无法理解普通的JS模块。 它仅理解描述JS模块API的TS模块或声明文件。 假设您希望将sample-react-framework保留为纯JS而不是TypeScript，则需要为其创建一个定义文件。 例如...

 // index.d.ts import React from 'react'; export class Banner extends React.Component { } 

然后在sample-react-framework的package.json中可以放入：

 "typings": "index.d.ts" 

然后，TypeScript应该能够解析定义文件，并理解当您说从“ sample-react-framework”中导入{Banner}时的意思。

我已经对其进行了测试，并在sample-react-framework中定义了以下index.d.ts：

import * as React from 'react';

interface Props { }
interface State { }

export class Banner extends React.Component<Props, State> { }
export class SideMenu extends React.Component<Props, State> { }
export class Navigation extends React.Component<Props, State> { }

TS编译器抱怨React.Component与定义不匹配（并且React导入不与React *相同），但是除了那些细微的调整以外，他的解决方案正是我解决问题所需要的。

Answer 2

我遇到了同样的问题。 我已经在ts-loader和typescript -loader中找到了问题（不是在webpack本身中）-因为两者都无法解析npm链接的模块。

另外，我还可以使用原始TypeScript编译器来编译相同的代码库-我将其用作解决方案（也是由于其他原因）。

但是我认为将resolve.falback指向原始/链接的源确实有所帮助。