ReactJs.Net、Gulp、Babel、MVCをブラウジング

Question

私の頭が痛いです、私はちょうど別のチュートリアルを読みましたが、彼らはこの作業をどうするかというアイデアが異なる（またはかなり急速に変化する）ようです。

背景：

私はReactJs.NETを学び始めている

、と私はES2015を書いて（バベルはまだインポート/エクスポートしません）モジュールをインポートするRequire('SomeComponent')ステートメントを使用して開始したいと思います。

私はプロジェクト（複数選択）のためにいくつかの余分な部品を使用したい、それが見えたReact.NET

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

が付属していますBabelBundleを使用することにより、ES2015部に、この作業の罰金を持っていましたこれを取得して使用する最も簡単な方法は、node + npmをインストールしてからrequireを使用してそのコンポーネントをインポートすることでした。

MVCバンドルをgulpに置き換え、gulpfileを使用してファイルを1つの使用可能なjsファイルに変換/結合しました。サーバーの側にとにかく）。

私は私のgulpfile.jsで行う必要があるが、私は、私はそれを行う必要があるために、または私は私のgulpfileでこれを記述するべきかを正確には100％を確認していない：

• スタートとその後、.jsxのファイル、および：（FOS JSX）
• が（ES2015の構文について）バベルのためbrowserifyと
• 解析とそれを解析を反応させると
• はそれを解析（そのためにはかなりわからない）（requireタグ）

私は正しい道を下っていますか？ ..

Answer 1

イントロ

私の脳が痛いが非常に多くのオプションがあると思われると私はかなりそれらすべてで混乱していますし、何が急速に変化する風景のようです[...]があるように思われます非常に多くのオプションがあり、私はそれらすべてがまったく混乱していて、急速に変化する風景のようです。

これは「JavaScriptの疲労」と呼ばれています。それは共通の悩みです。

私は正しい道を下っていますか？

すべての人間はこの実存的な質問に取り組まなければならないが、調査によると、JavaScriptの開発者は110％以上の苦痛を伴うことが分かっている。あなたがこの道を歩み続けることに決めたら、思考のための食べ物。

Require('SomeComponent')

require()（小文字）。

バベルは、適切なプラグインをまだ

エクスポート/インポートしません/プリセットバベルは、ノードのrequire()含む種々ES5モジュールシステムにES2015モジュール構文（import|export）をコンパイルしません。しかし、今のところノードモジュールシステムを使うほうが良いかもしれません。 （requireタグ）

require()通話用browserifyと

解析 - それは機能ではなく、タグです。

あなたは、必ずしもすべてで、このためのがぶ飲みを必要としない方法。ここ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")); 
} 

これは（Babelify経由）バベルを実行し、ES2015の構文とJSXを処理するように設定します。あなたは代わりに.babelrcファイルにバベルの設定を入れて、transform(babelify)とすることができます。

require()呼び出しの解析前に、Browserify変換が実行されます。したがって、Browserifyがコードを分析する必要があるときには、それはES5になります。

デフォルトでは、ファイルを含むJSXは.jsまたは.jsxです。

FWIW es2015プリセットはノードモジュールにimport|exportをコンパイルします。

は私も正しい道を下って行くアム

gulp.task("bundle", bundle); 

結論：あなたがグッと統合したい場合

、あなたのような何かを行うことができますか？

多くのパスがあります。しかし、バベルを使うことは、多くの成功を収める道の一部です。したがって、Browserifyを使用しています（ただし、Webpackを好む人もいます）。私が描いたようなものから始めれば、それはあなたを地面から離れさせなければなりません。その時点でもっと親しみやすいように見えるはずです。

私のminiminirepro/babelifyレポをチェックアウトすることもできます。これは、バグの最小限の複製を作成するためのテンプレートとしての意味ですが、BrowserifyでバンドルしてBabelで変換する方法の世界的なレベルの例です。