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

Question

我正在开发一个可用于 React 应用程序的概念验证示例 React 框架/库，以及围绕它的 AngularJS 框架包装器，以便它也可以用作 AngularJS 框架/库。

有2个项目：

示例反应框架

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

现在我有一个来自 sample-react-framework-wrapper 项目的 sample-react-framework 项目的 npm 链接。

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 文件 - 但仍然会抛出最终找不到我的框架的错误。

我尝试了与谷歌搜索不同的东西，例如将 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-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 模块。它只理解 TS 模块或描述 JS 模块 API 的声明文件。假设您希望将 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 应该能够解析定义文件并理解您所说的 import { Banner } from 'sample-react-framework'; 的意思。

我已经对其进行了测试，并在 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 导入不是 '* as React'）——但除了那些小的调整之外，他的解决方案正是我解决问题所需要的。

Answer 2

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

我还能够使用原始 TypeScript 编译器编译相同的代码库 - 我将其用作解决方案（也因为其他原因）。

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