ReactJs.Net、Gulp、Babel、Browserify MVC

Question

我的大脑很痛，我刚刚阅读了大量不同的教程，但他们对如何完成这项工作的想法似乎不同（或变化很快）。

背景：

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

通过使用 React.NET 附带的 BabelBundle，我在 ES2015 部分工作得很好

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

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

这导致我用 gulp 替换 MVC 捆绑，并使用 gulpfile 将我的文件转换/组合成一个可用的 js 文件（如果我在服务器上预渲染第一个视图，它比 .NET 捆绑更好用反正一边）。

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

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

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

Answer 1

简介

我的大脑很痛 [...] 似乎有这么多选择，我对它们都感到很困惑，而且似乎是一个快速变化的环境..

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

我是不是走对了路？

虽然所有人都必须解决这个存在的问题，但研究表明，JavaScript 开发人员对它的烦恼要高出 110%。如果您决定继续走这条路，请深思。

Require('SomeComponent')

require()（小写）。

babel 还没有导入/导出

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

用 browserify 解析（require 标签）

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);

结论

我是不是走对了路？

有很多路径。但是使用 Babel 是许多人成功选择的路径的一部分。使用 Browserify 也是如此（但是，例如，有些人更喜欢 Webpack）。如果您从我所说明的内容开始，它应该会让您起步，并且在这一点上看起来应该更平易近人。

您还可以查看我的 miniminirepro/babelify 回购。它的目的是作为一个模板，供人们创建最小的 bug 复制品，但它是一个 hello world 级别的示例，说明如何与 Browserify 捆绑并与 Babel 进行转换。