asp.net-mvc - 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 文件(如果我在服务器上预渲染第一个 View ，它比 .NET 捆绑效果更好)无论如何)。

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

• 从一个 .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 疲劳”。这是一种常见的痛苦。

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 repo 。它的目的是作为一个模板，供人们创建最少的错误复制，但它作为一个 hello world 级别的示例，说明如何与 Browserify 捆绑在一起并使用 Babel 进行转换。