Asp.net mvc ReactJs.Net、Gulp、Babel、Browserify MVC

我的大脑很痛，我刚刚读了大量不同的教程，他们对如何使这项工作起作用的想法似乎有所不同（或变化很快）

背景：

我已经开始学习ReactJs.NET，我想开始编写ES2015，并使用

Require（'SomeComponent'）

语句导入模块（babel尚未导入/导出）

通过使用React.NET附带的

BabelBundle

，我可以很好地完成ES2015部分的工作

bundles.Add(New BabelBundle("~/bundles/main").Include(
                "~/Scripts/test.jsx"
            ))

我想为一个项目（multiselect）使用一些额外的组件，而获得并使用它的最简单方法似乎是安装node+npm，然后使用

require

导入该组件

这让我开始用gulp替换MVC绑定，并使用gulpfile将我的文件转换/组合成一个可用的js文件（如果我在服务器端预先渲染第一个视图，那么它比.NET绑定效果更好）

我需要在我的gulpfile.js中做什么，但我不能100%确定我需要按什么顺序做，或者我应该如何准确地在我的gulpfile中描述这一点：

• 从一个.jsx文件开始，然后：（不太确定顺序）
• 使用react（fos jsx）对其进行分析
• 用babel解析它（用于ES2015语法）
• 使用browserify for解析（

  require

  tags）

我走的路对吗？似乎有太多的选择，我被它们和一个快速变化的环境弄糊涂了。

Intro 我的大脑受伤了[…]似乎有太多的选择，我对这些选择和快速变化的前景感到困惑

这就是所谓的“JavaScript疲劳”。这是一种常见的痛苦

我走的路对吗

虽然所有人都必须解决这个存在的问题，但研究表明，JavaScript开发人员对它的烦恼要多出110%。如果你决定继续沿着这条路走下去，那就值得深思

Require（'SomeComponent'）

require（）

（小写）

巴贝尔还没有导入/导出

借助适当的插件/预设，Babel将ES2015模块语法（

import | export

）编译到各种ES5模块系统，包括节点的

require（）

。但是，您现在最好只使用节点模块系统

使用browserify for解析（

require

tags）

require（）

调用——它是一个函数，而不是一个标记

如何 你根本不需要大口大口地喝。下面是如何使用Browserify启动的一个基本示例：

var babelify=require（“babelify”）；
var browserify=要求（“browserify”）；
var fs=要求（“fs”）；
函数束（）{
返回browserify（“/输入模块”{
//启用用于开发的源地图
调试：process.env.NODE_env！=“生产”，
})
.变换（babelify{
预设：[“es2015”，“反应”]
})
.bundle（）
.pipe（fs.createWriteStream（“./bundle.js”，“utf8”）；
}

这将运行Babel（通过Babelify），并将其配置为处理ES2015语法和JSX。您可以将Babel配置放在

.babelrc

文件中，只需使用

transform（babelify）

Browserify转换在解析

require（）

调用之前运行。因此，当Browserify需要分析代码时，它将是ES5

默认情况下，包含JSX的文件可以是

.js

或

.JSX

FWIW

es2015

预设将编译

import | export

到节点模块

如果您想与gulp集成，则可以执行以下操作：

gulp.task（“bundle”，bundle）；

结论 我走的路对吗

有很多途径。但使用巴别塔是许多人成功走的道路的一部分。使用Browserify也是如此（例如，有些人更喜欢Webpack）。如果你从我所演示的东西开始，它应该会让你离开地面，在这一点上它应该看起来更平易近人

---

你也可以看看我的回购协议。它的意思是作为一个模板，供人们创建最少的bug复制品，但它是一个hello world级别的示例，说明如何使用Browserify进行捆绑，并使用Babel进行转换。

我在Github上创建了一个Reactjs.Net样板示例。诚然，根据你的问题，它并没有使用Gulp，但希望它能给你一些开始的指导。如果您感兴趣，它还将为您提供如何使用react router创建同构SPA应用程序的想法。看看这是不是你想要的？我也很想听到任何反馈：）看起来很有意思，但我现在不能让自己去看另一个选项，我会在家里看一看，在工作中使用vs 2013，但它缺少一些要求，我觉得我应该这样做，特别是当尝试使用.NET lib:/Awesome在服务器上预渲染时，这似乎是我需要的答案-我看到你可以将babel作为browserify插件运行，但是使用babel作为插件从gulp调用browserify似乎让我大吃一惊！这就成功了-非常感谢你（也感谢你的安慰性评论，我不是唯一一个有这种感觉的人！）太好了，谢谢。是的，你绝对不是唯一一个有这种感觉的人，哈哈，毕竟，我觉得网页可能是一种方式！有趣的时刻，但这真的帮助了我，所以谢谢，真的我现在只想写一些该死的代码哈哈！