Question

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

有两个项目：

样品反应的框架

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

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

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

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

我试图将我的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

我很快回复了我，告诉我问题是我需要为我的反应框架定义一个打字文件，以便TypeScript理解它 - 哎呀！

从你的问题：
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指向原始/链接来源确实有帮助。

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

2 个答案: