ReactJs.Net,Gulp,Babel,Browserify MVC

Question

我的大脑受伤了,我刚刚阅读了大量不同的教程,他们似乎在如何使这项工作的想法上有所不同(或变化很快).

背景:

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

我使用BabelBundleReact.NET附带的ES2015部件就可以正常工作了

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

我想为项目使用一些额外的组件(多选),似乎最简单的方法是使用它来安装node + npm,然后require用来导入该组件.

这导致我用gulp替换MVC捆绑,并使用gulpfile将我的文件转换/组合成一个可用的js文件(如果我预先渲染服务器端的第一个视图,它比.NET捆绑更好) .

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

• 从.jsx文件开始,然后:(不太确定以哪个顺序)
• 用反应解析它(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() 调用 - 它是一个函数,而不是一个标记.

如何

你根本不需要喝水.以下是如何使用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).

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

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

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

如果你想与gulp集成,那么你可以做类似的事情:

gulp.task("bundle", bundle);

结论

我甚至走在正确的道路上？

有很多路径.但使用Babel是许多人成功采取的路径的一部分.所以使用Browserify(但是,例如,有些人更喜欢Webpack).如果你从我所说明的东西开始,它应该让你离开地面,那时它应该更加平易近人.

您还可以查看我的miniminirepro/babelify回购.它意味着人们可以创建最小的错误复制模板,但它可以作为如何与Browserify捆绑并使用Babel转换的hello世界级示例.