我的大脑受到伤害，我刚刚阅读了大量不同的教程，他们在如何完成这项工作的想法中似乎有所不同（或变化很快）。

背景：

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

通过使用BabelBundle附带的BabelBundle ，我对ES2015部分的工作很好

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

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

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

我需要在我的gulpfile.js中做什么，但我不能100％确定我需要做什么，或者我应该如何在我的gulpfile中描述这个：

从.jsx文件开始，然后:(不太清楚按顺序）

用反应解析（fos jsx）

用babel解析它（用于ES2015语法）

用browserify解析（ require标签）

我是否会走上正确的道路？ 似乎有这么多的选择，我对他们都很困惑，而且似乎是一个瞬息万变的景观。

---

介绍

我的脑子受伤了，似乎有这么多的选择，我对它们都很困惑，而且似乎是一个瞬息万变的景观。

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

我是否会走上正确的道路？

虽然所有的人都必须面对这个存在的问题，研究表明，JavaScript开发者比它更加烦恼110％。 如果你决定继续沿着这条道路前行，那么你需要思考。

Require('SomeComponent')

require() （小写）。

巴贝尔还没有进口/出口

通过适当的插件/预设，Babel可以将ES2015模块语法（ import|export ）编译到各种ES5模块系统，包括Node's require() 。 但是，您现在可能更愿意仅使用Node模块系统。

用browserify解析（ 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 。

FWIW es2015预设将编译import|export到节点模块。

如果你想与gulp集成，那么你可以做一些事情：

gulp.task("bundle", bundle);

结论

我是否会走上正确的道路？

有很多路径。 但使用Babel是许多成功路径的一部分。 所以使用Browserify（但是，例如，一些偏好Webpack）。 如果你从我已经说明的事情开始，它应该让你离开地面，在那一点上它应该更加平易近人。

你也可以看看我的miniminirepro / babelify回购。 这意味着人们可以创建最小程度的bug复制模板，但它可以作为hello世界级示例，介绍如何与Browserify进行捆绑并与Babel进行转换。

链接地址: http://www.djcxy.com/p/32981.html

上一篇: ReactJs.Net, Gulp, Babel, Browserify MVC

下一篇: Using Babelify to compile React results in React Router being undefined