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

Question

我正在研究一个概念样例React框架/库，它可以用于React应用程序，以及一个AngularJS框架包装器，这样它也可以作为AngularJS框架/库使用。

有两个项目：

样品反应框架

示例反应框架包装器( AngularJS项目)

现在，我有一个从示例反应框架包装项目到样例反应框架项目的npm链接。

示例反应框架有3个组件-导航栏、横幅和侧菜单.这些组件是.jsx文件。

样例-反应-框架包装也有3个组件-相同的3个-只是.ts包装器，以呈现反应元素。

我正在尝试将我的React模块导入到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文件-但仍然抛出错误，它无法找到我的框架。

我尝试过与谷歌搜索不同的东西，比如设置一个resolve.fallback作为我的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-加载程序项目的GitHub问题的帮助：https://github.com/TypeStrong/ts-loader/issues/72。

有趣的是，我很快回复了我，并告诉我，问题是我需要为我的react框架定义一个类型文件，以便TypeScript能够理解它-- oops！

从你的问题： 从“样本-反应-框架”导入{ Banner }； 这里的错误是TypeScript说它不理解样例反应框架。TypeScript不理解普通的JS模块。它只理解描述JS模块API的TS模块或声明文件。假设您希望保持示例反应框架为纯JS而不是TypeScript，则需要为其创建一个定义文件。例如..。 // index.d.ts导入从“React”反应；导出类边框扩展React.Component {} 然后，在示例反应框架的package.json中，您可以将： “打字”："index.d.ts“ 然后，TypeScript应该能够解析定义文件，并在从‘sample-react framework’中导入{ be }时理解您的意思；。

我已经测试了它，并在样例反应框架中定义了以下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导入不是'* as React') --但除了那些小的调整之外，他的解决方案正是我解决问题所需要的。

Answer 2

我也遇到过同样的问题。我已经在T-装载机和类型记录-加载程序 (而不是webpack本身)找到了这个问题--因为两者都无法解决npm连接的模块。

此外，我还能够用原始的TypeScript编译器编译相同的代码库--我正在使用它作为解决方案(也因为其他原因)。

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