Question

我试图让Typecript和React在MVC Core中一起工作

问题是我的.tsx文件中需要以下行：

import React = require('react');
import ReactDOM = require('react-dom');

这些行通过两个编译器成为JS中的以下浏览器处理：

var React = require('react');
var ReactDOM = require('react-dom');

显然，浏览器无法运行这些行，因为＆＃34;要求＆＃34;不是浏览器中的功能

是的，我可以验证Typescript和React都处理了文件。

在网站的其他地方，建议使用全局导入，但这是一个坏主意（它甚至在帖子中也这样说），我也可以通过创建一个名为＆＃34; require＆＃的空函数来解决这个问题。 34;，但那也是不好的做法

出现这种情况我感到很惊讶，我认为TypeScript的重点是采用浏览器无法理解的更好的代码，并将其转换为等效的代码。因此，TypeScript允许这些行只是通过是令我困惑的。

我已尝试在tsconfig.json中使用module指令生成所需的输出，但似乎并不是浏览器兼容的选项

有没有办法让React的babel编译器吃掉require函数？是不是因为期望React对它们做些什么而留下它们？

编辑：我的问题与建议复制的问题不同，因为它询问了module（）而不是导入。

虽然我怀疑这2个问题的答案可能是相同的，但是对于已接受的答案的建议，例如＆＃34;只是我们的参考＆＃34;不工作，虽然使用外部模块加载器应该解决问题，但这是一个破碎的解决方案

require（）不是基于浏览器的JS的一部分，因此我根本不希望TypeScript输出它

EDIT2：由于我的设置有更多详细信息，请点击此处：我的wwwroot / js目录的结构如下：

/def
..react.d.ts
..react-dom.d.ts
tsconfig.json
source .tsx and compiled .js files

请注意，d.ts文件是来自存储库的copypasta。似乎没有一种方法可以将它们加载到＃34;正确＆＃34;没有添加荒谬的依赖项，如节点。似乎在常规mvc中执行此操作的NuGet模块在mvc core

中没有任何功能

我还尝试将d.ts文件移动到与其他所有文件夹相同的文件夹中，这没有效果

tsconfig.json看起来像这样：

{
  "compileOnSave": true, //Doesn't do anything? Build required to compile
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5", //Is this the ES version I'm supposed to be typing in or the ES version to compile to? Irrelevant, changing this does nothing
    "jsx": "react" //Using "preserve" outputs a jsx file to go through the React Babel compiler, does not solve issue
    //"module": Irrelevant, a "don't worry I've got them covered" flag option doesn't exist, no options are suitable for browser use
    //"noResolve": Irrelevant, does nothing
  },
  //"files":[] Explicitly including the d.ts files here doesn't seem to do anything, does not allow me to remove import lines
  "exclude": [ //Have tried removing this, doing so has no effect, does not allow me to remove import lines
    "node_modules",
    "wwwroot"
  ]
}

由于我使用Visual Studio，所有内容都在构建时进行编译，我认为它使用了引擎盖下的tsc.exe

至于React ......我在project.json

的依赖项部分列出了以下内容

"React.AspNet": "2.5.0",
"React.Core": "3.0.0-rc1"

在startup.cs中，我在ConfigureServices中有以下内容：

services.AddJsEngineSwitcher(
    options=>options.DefaultEngineName = V8JsEngine.EngineName
).AddV8();
services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
services.AddReact();

...以及配置

中的以下内容

app.UseReact(config => {});

出于开发目的，我在_Layout.cshtml中有以下内容

<environment names="Development">
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
</environment>

这是一个学习项目，因此它不会进入生产模式，但如果确实如此，我会自行托管反应源代码并通过默认的捆绑器进行捆绑和缩小。我不相信使用cdn的积极因素超过风险

我尝试使用///引用，它们似乎是一个已弃用的功能，在这种情况下，它们不会做任何事情

我尝试使用以下语法导入react，但这也会导致输出不同的非浏览器兼容代码

import React = __React;
import ReactDOM = __React.__DOM;

值得注意的是，TypeScript和React都完全在这些条件下工作，没有节点依赖，也没有愚蠢的包装。只有TypeScript模块系统坚持输出我不需要的东西

Answer 1

这是正确的......经过大量研究后，我的结论是，MVC Core，TypeScript和React还不是一直都在一起。

许多文档和讨论提示某种可能的隐式引用，但是当您的项目不保证客户端模块系统时，这似乎是首选方式。 ..这个功能似乎不适用于非打字稿模块，或者它是如此模糊和严重记录，我无法弄清楚

....这可能是那些对其他人来说如此明显的事情之一，没有人讨厌它，如果它是，请让我知道我是多么愚蠢

最重要的是，如果你想使用TypeScript的模块系统，你应该拥有一个可以与之交谈的浏览器端模块系统。

我已经查看了所有这些内容并投入大量精力来理解哪些是React和.Net的最佳选择

React对此设置了一些额外的限制，因为你想要使用它的服务器端渲染功能......比如，你真的想要使用它是关于React的最好的东西，所以你需要一个能够很好地发挥作用的模块系统。

我已经得出结论，RequireJS可能是出于多种原因的正确方法，对于客户来说它只是一个轻量级的JS文件，它与它的庞大的JS庞然大物相比很好。 ;竞争对手，它自己的服务器端组件都有一个.net版本，这将使他们更容易使用React的服务器端东西

....遗憾的是，RequireJS的服务器端组件依赖于.Net Framework的旧MVC，因此您无法在MVC Core中使用它们，现在它已经死了端

老实说，来自Javascript编程的十五年，我发现在TypeScript上的这个假设是每个人都在使用一个沉重的客户端模块系统而不仅仅是有点可怕

我认为重要的是要记住，无论你为浏览器做什么脚本，它都可以运行，或者编译回Javascript。这意味着你可以带来的任何东西都可能比它自己的Javascript更强大。

您使用这些东西是因为他们可以更快地编写代码，更容易测试，在设计时显示错误等等，即它们让您和您的团队的生活更轻松，但就像一盒药片，他们中的每一个都有副作用，如果你使用太多，他们会积累并导致问题

这些模块系统在正确的项目中看起来都是很棒的工具，就像每个＆＃34;丸＆＃34;在＆＃34;框＆＃34;如上所述，但我认为它们应该几乎无处不在，因为TypeScript似乎认为它们是

如果您选择一个非常适合您项目需求的小型客户端堆栈，并将您的JS正确地分离为全局捆绑包，以及一组特定于视图的捆绑包，您的应用程序可以变得非常大而不会遇到任何问题你想要一个沉重的模块系统来解决

如果你发现自己认为自己需要这样的东西，我会花时间回到你的技术堆栈上，真正弄清楚每件作品对你的影响以及是否值得付出代价在那里，减少堆栈在很多情况下是一个更好的方法来保持稳定，而不是添加另一个框架

您必须问自己每个工具为您解决的问题，是否成功，以及是否有更好的方法......尤其是其他工具提供的方法在你的堆栈上，一个根本不需要额外工具的解决方案，或通过删除导致问题副作用的工具提供的解决方案

我看到很多人都在谈论这些模块加载器，以此来避免因添加到全局命名空间而引起的冲突，我很抱歉将所有这些名称移到模块列表中所以他们可以在那里发生冲突而不是解决任何事情

考虑到这一点...... webpack ....我认为我在这里过早地关注节点依赖，仔细看看我认为它只是在设计时使用node来编译东西，这很好，只要很长因为它不希望我的生产服务器上的节点我们很酷但是...所有webpack正在做的是采用你的需求线并使用它们来内联其他脚本，这不是这些线是什么意图以这种方式使用和使用它们首先击败了使用它们的对象

所有这一切似乎都是将模块转移回全局命名空间，在那里你首先不需要它们，此外如果你在上面提出我的建议并制作一个全局包并且对于每个需要它自己的工具的视图，你会遇到以网络方式处理问题的问题....再次，请纠正我，如果我误判了这个

嗯，这是我现在能想到的最好的答案，真的希望有人会出现并与我讨论，因为我觉得我在一些地方错过了这一点

现在我要查看一堆React特定的东西，然后我可能会看看我是否可以在MVC for Framework中使用此堆栈并查看更改

如果有人能够提出更好的答案，或者在对组件进行了多次修补后几个月内提供了正确的解决方案，那么我会将绿色标记移动

Answer 2

显然，浏览器无法运行这些行，因为＆＃34;要求＆＃34;不是浏览器中的功能

事实上。您关注什么教程？除了TypeScript编译之外，你肯定需要一个模块捆绑器，例如这是webpack的快速入门：https://basarat.gitbooks.io/typescript/content/docs/quick/browser.html

打字稿和反应输出需要

2 个答案: