ReactJs.Net，Gulp，Babel，Browserify MVC

Question

我的大脑很痛，我刚刚读了很多不同的教程，他们似乎在如何使这件事起作用的想法上有分歧(或变化很快)。

背景：

我已经开始学习ReactJs.NET，我想开始编写ES2015并使用Require('SomeComponent')语句导入模块(babel还没有导入/导出)。

通过使用ES2015附带的BabelBundle，我对React.NET部件有了很好的使用。

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

我想为一个项目(一个multiselect)使用一些额外的组件，这似乎是获取和使用它的最简单的方法，即安装节点+ npm，然后使用require导入该组件。

这导致我用gulp代替MVC捆绑，并使用gulpfile将我的文件转换/组合成一个可用的js文件(如果我在服务器端预呈现第一个视图，这比.NET绑定更好)。

在我的gulpfile.js中我需要做什么，但我不能100%确定我需要按照什么顺序来做，或者我应该如何在我的吞咽文件中描述这个：

• 从一个.jsx文件开始，然后：(不太确定顺序)
• 用react解析它(fos )
• 用babel解析它(用于ES2015语法)
• 用浏览器解析for (require标记)

我走的路对不对？似乎有这么多的选择，我对它们感到非常困惑，似乎是一个迅速变化的景观。

Answer 1

简介

我的脑子疼..。似乎有这么多的选择，我对它们感到非常困惑，似乎是一个迅速变化的景观。

这被称为"JavaScript疲劳“。这是一种常见的痛苦。

我走的路对不对？

尽管所有的人类都必须努力解决这个存在主义的问题，但研究表明，JavaScript开发人员对这个问题的困扰程度要高出110%。如果你决定继续沿着这条路走下去，那就需要思考。

Require('SomeComponent')

require() (小写)。

巴贝尔还没有进出口

使用适当的插件/预设，Babel可以将ES2015模块语法(import|export)编译到各种ES5模块系统，包括Node的require()。不过，您最好现在只使用Node模块系统。

用浏览器解析for (require标记)

require()调用--这是一个函数，而不是标记。

如何操作

你根本不需要为此喝彩。下面是一个基本的示例，说明如何使用Browserify来实现这个目标：

var babelify = require("babelify");
var browserify = require("browserify");
var fs = require("fs");

function bundle () {
  return browserify("./entry-module", {
    // Enable source maps for development
    debug: process.env.NODE_ENV !== "production",
  })
  .transform(babelify, {
    presets: ["es2015", "react"]
  })
  .bundle()
  .pipe(fs.createWriteStream("./bundle.js", "utf8"));
}

这将运行Babel (通过Babelify)，并将其配置为处理ES2015语法和JSX。您可以将Babel配置放在.babelrc文件中，而只需拥有transform(babelify)。

Browserify转换在解析require()调用之前运行。因此，当Browserify需要分析代码时，它将是ES5。

默认情况下，包含文件的JSX可以是.js或.jsx。

es2015预置将把import|export编译成节点模块。

如果您想要与gulp集成，那么您可以这样做：

gulp.task("bundle", bundle);

结论

我走的路对不对？

有很多条路。但使用Babel是许多人成功走的道路的一部分。使用Browserify也是如此(例如，有些人更喜欢Webpack)。如果你从我所展示的东西开始，它应该能让你离开地面，而且在这一点上它应该会显得更加平易近人。

你也可以看看我的极小化回购。它作为一个模板，供人们创建最少的bug复制，但它作为一个hello世界级的例子，如何捆绑与Browserify和转换与Babel。