ReactJs.Net、Gulp、Babel、Browserify MVC

Question

我的脑袋疼，我刚刚阅读了大量不同的教程，但他们对如何使这项工作的想法似乎有所不同（或变化非常快）。

背景：

开始学习ReactJs.NET，想开始写ES2015，用Require('SomeComponent')语句导入模块（babel还没有import/export）

通过使用 React.NET

附带的 BabelBundle，我在 ES2015 部分工作得很好

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

我想为项目使用一些额外的组件（多选），获得和使用它的最简单方法似乎是安装 node + npm，然后使用 require 导入它组件。

这导致我将 MVC 捆绑替换为 gulp，并使用 gulp 文件将我的文件 transform/combine 转换为单个可用的 js 文件（比 .NET 更好用）如果我在服务器端预渲染第一个视图，则捆绑。

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

从 .jsx 文件开始，然后：（不太确定顺序）
用 react (fos jsx) 解析它
用babel解析（ES2015语法）
使用 browserify 解析（require 个标签）

我走的路是否正确？似乎有太多选择，我对它们都感到很困惑，而且似乎是一个快速变化的环境..

Answer 1

简介

My brain hurts [...] there seems to be so many options and I am getting quite confused by them all and what seems to be a rapidly changing landscape..

即所谓"JavaScript fatigue"。这是一种常见的痛苦。

Am I even going down the right path?

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

Require('SomeComponent')

require()（小写）。

babel doesn't import/export yet

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

Parse with browserify for (require tags)

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

如何

您根本不需要 gulp。这是一个基本的例子，说明如何使用 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。

FWIW es2015 预设将 import|export 编译为 Node 模块。

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

gulp.task("bundle", bundle);

结论

Am I even going down the right path?

有很多路径。但是使用 Babel 是许多人成功采用的路径的一部分。使用 Browserify 也是如此（但是，例如，有些人更喜欢 Webpack）。如果你从像我所说明的那样开始，它应该会让你离开地面，而且在那时它应该看起来更平易近人。

您还可以查看我的 miniminirepro/babelify 存储库。它的目的是作为一个模板，供人们创建最少的错误复制，但它作为一个 hello world 级别的示例，说明如何与 Browserify 捆绑在一起并使用 Babel 进行转换。

ReactJs.Net、Gulp、Babel、Browserify MVC

ReactJs.Net, Gulp, Babel, Browserify MVC

asp.net-mvc

browserify

reactjs

gulp

babeljs

简介

如何

结论