gpt4 book ai didi

javascript - 模块未定义,导出未定义 - 使用 typescript + React

转载 作者:行者123 更新时间:2023-12-03 04:25:56 25 4
gpt4 key购买 nike

我有一个非常简单的应用程序,使用 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>

当我运行时,控制台中会出现以下内容: enter image description here

我试图在不使用 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 });

Uncaught ReferenceError: exports is not defined

最佳答案

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

如果您确实想避免任何转编译,则必须避免 future 的语言功能。因此,React 和 ReactDOM 必须位于全局命名空间中,并且所有组件必须位于同一个文件中,或者加载到全局命名空间中。我觉得这将是一场艰苦的战斗,但它肯定是可行的。

关于javascript - 模块未定义,导出未定义 - 使用 typescript + React,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43729206/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com