未定义模块，未定义导出 - 使用 typescript + react答案

【问题标题】：module is not defined, exports is not defined - with typescript + react未定义模块，未定义导出 - 使用 typescript + react
【发布时间】：2017-09-29 11:09:18
【问题描述】：

我有一个使用 ASP 4/MVC 5 和 Typescript (2.3.1.0) 的非常简单的应用程序

这是基本布局：

tsconfig.json

{

  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "jsx": "preserve",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "node_modules/@types/**/*.d.ts",
    "Scripts/**/*.ts",
    "Scripts/**/*.tsx"
  ]
}

app.tsx（使用 Visual Studio 的 typescript 工具编译为 app.js）

import React, { Component } from 'react';

interface FooProps {
    name: string;
}

export default class Hello extends React.Component<FooProps, undefined> {
    render() {
        return <h1>Hello from {this.props.name} !</h1>
    }
}

_Layout.cshtml

<body>
    @RenderBody()

    <script type="text/javascript" src="~/Scripts/jquery-2.2.4.js"></script>
    <script type="text/javascript" src="~/node_modules/react/react.js"></script>
    <script type="text/javascript" src="~/node_modules/react-dom/dist/react-dom.js"></script>
    <script type="text/javascript" src="~/Scripts/app.js"></script>
</body>

当我运行时，这会出现在控制台中：

我正在尝试不使用 browserify/webpack 之类的东西来做到这一点。我的问题是，有没有可能……如果有，怎么做？

编辑

app.jsx 在 tsx -> jsx 转译后看起来像这样：

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
var Hello = (function (_super) {
    __extends(Hello, _super);
    function Hello() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Hello.prototype.render = function () {
        return <h1>Hello from {this.props.name} !</h1>;
    };
    return Hello;
}(react_1.default.Component));
//# sourceMappingURL=app.jsx.map

注意，这里抛出错误：

Object.defineProperty(exports, "__esModule", { value: true });

未捕获的引用错误：未定义导出

【问题讨论】：

app.js 在转译之后是如何处理的？
@Searching 使用转译的 jsx 添加了编辑。
你需要 SystemJS，或者 Webpack 来动态解析这些 ES Module 语法。目前有一些浏览器支持它，但不足以让一个完整的应用运行。
我假设在 BabelBundle here 中发生的 babel 转译会处理这个问题。

标签： javascript asp.net asp.net-mvc reactjs typescript

【解决方案1】：

“我正在尝试不使用 browserify/webpack 之类的东西来做到这一点”——简短的回答是否定的。目前任何浏览器都不支持 ES2015 导入/导出语法。因此，我不确定您希望它如何在没有某种转译步骤的情况下在浏览器中工作。最流行的方法是使用 Webpack/Babel，但你可以只使用 Babel....

如果您真的想避免任何转编译，则必须避免未来的语言功能。所以React 和ReactDOM 必须在全局命名空间中，并且所有组件要么必须在同一个文件中，要么加载到全局命名空间中。我觉得这将是一场艰苦的战斗，但它肯定是可行的。

【讨论】：

我正在使用reactjs.net 中记录的 API 来转换和捆绑我的 jsx。这是BabelBundle。我假设这会做它需要做的事情来生成可运行的 ES5 javascript？