非コア CSS_html/css_WEB-ITnose の非同期読み込み

運用環境では、フロントエンドに依存して JSXTransformer.js ファイルを参照して JSX を JavaScript に変換するのはまったく信頼できません。したがって、Reactjs を使用する子供用の靴では、より洗練された方法を使用してこのタスクを完了する必要があります。現在最も一般的に使用されているフロントエンド構築ツールとして、この問題を解決するために Browserify と組み合わせた gulp は非常に優れています。お見逃しなく :)

早速、本題に入りましょう。

ソースコード

今回の私たちの使命は、この荒廃したソースコードをより最適化することです。これは千マイルの旅の始まりです。このコードが魔法の馬を作るために使用されていることが理解できない子供がいる場合は、「ママは家に帰って基本を学ぶように頼んだ」としか言えません。コード、刺してください）。

<div id="app"></div><script type="text/jsx">	var HelloWorld = React.createClass({ 		render: function() { 			return (				<div> Hello World </div> 			);		}	}); 	React.render(<HelloWorld />, document.getElementById('app'));</script><script type="text/jsx">	var Child = React.createClass({ 		render: function() { 			return (				<div> The Child </div> 			);		}	}); 	var Parent = React.createClass({ 		render: function() { 			return (				<div> Hello World </div>				<Child/> 			); 		} 	}); 	React.render(<Parent />, document.getElementById('app'));</script>

最適化

前に両方のコンポーネントを一緒に書きましたが、今度はそれらを独立したファイルに分割しましょう。そのうちの 1 つは js/components/Parent.jsx という名前で、内容は次のとおりです:

var Child = require('./Child.jsx');var Parent = React.createClass({  render: function(){    return (      <div>        <div> Hello World </div>        <Child/>      </div>    )  }});module.exports = Parent;

親の子コンポーネント Child は js/components/Child.jsx に書き込まれ、内容は次のとおりです:

var Child = React.createClass({  render: function(){    return (      <div> The Child </div>    )  }});module.exports = Child;

Up toこの点では、コンポーネントは事前に分割されています。module.exports についてほとんど知らない、またはこれがどのような種類の航空機であるかを理解していない子供がいる場合は、Baidu と Google CMD の仕様を参照してください。ニアンはとても魅力的で、混乱しているあなたを助けてくれます。

実際にページ上にコンポーネントを表示したい場合は、React.render 関数を実行する必要があります。これは js/app.js で記述されており、内容は次のとおりです:

var Parent = require('./components/Parent.jsx');React.render(<Parent />, document.getElementById('app'));

これを実現するために、次のことも行いました。非常に重要なこと 重要なことは、ファイル ディレクトリが最適化されていることです。コンポーネントは /components フォルダーに配置され、スタートアップはルート ディレクトリ /js に配置されます。これは明確です。

Browerify を使用した後は、次のようにカスタム スクリプト ファイルを HTML ファイルに導入するだけです:

<script src='js/bundle.js'></script>

すべての依存する js コンテンツは、将来、bundle.js ファイルにコンパイルされます。

Browserify をインストールします

まず、Gulp をインストールする必要があります。ここでは、nodejs が全員のシステムにインストールされ、gulp もグローバルにインストールされていると仮定します。つまり、gulp -v
と入力すると出力が表示されます。

まず、コンピューターに gulp が正常にインストールされていることを確認してください。インストール方法については詳しく説明しません。 GoogleやBaiduにアクセスしてみると良いでしょう。

コマンドラインで次のコマンドを入力すると

gulp -v

出力結果がこのようになれば、gulp が正常にインストールされたことを意味します。

CLI version 3.9.0Local version 3.9.0

これに基づいて、プロジェクト ディレクトリに入るときに、gulp、browserify、および関連する補助ツールをローカルにインストールする必要があります:

npm install --save-dev gulp browserify vinyl-source-stream babelify

Mac を使用している場合は、sudo を追加することを忘れないでください。

上記の 4 つのパッケージのそれぞれの機能について説明しましょう:

• gulp はタスク実行環境であり、タスクのスケジューリングに使用されます

• browserify モジュールは出力に js

• vinyl-source-stream を必要とするために使用されますbrowserify データを正確に変換してフローを gulp 標準に準拠させます

• reactify JSX のコンパイル機能を実装するために使用します

その後、gulpfile.js に移動して次の内容を入力します:

var gulp = require("gulp"),	browserify = require('browserify'),	reactify = require('reactify'),	source = require('vinyl-source-stream');gulp.task('jsx', function() {	browserify('./js/app.js')		.transform(reactify)		.bundle()		.pipe(source('bundle.js'))		.pipe(gulp.dest('js'));});

上記のスクリプトを説明しましょうプロセス 。最初のステップは、処理のためにエントリ ファイル app.js をbrowserify に渡すことです。jsx コンパイルの場合、公式の推奨事項は Reactify です。次に、bundle() を実行して、すべての依存関係を Bundle.js にパッケージ化します。ただし、browserify は gulp 用に特別に作成されたパッケージではないため、出力されるすべてのデータ ストリームを gulp に直接パイプすることはできません。そのため、source() を使用する必要があります。 ) インターフェイス、つまり、vinyl-source-stream ツールがそれを処理し、それを gulp にパイプして、出力 Bundle.js ファイルを js フォルダーに保存します。

タスクを作成したら、コマンドラインで実行します。

gulp jsx

js/bundle.js ファイルが生成されます。このファイルのタグはindex.htmlに追加されているので、chromeで直接開くとランニング効果が確認できます。

この記事は「When React Meets Gulp and Browserify」から転載しています

原文 http://segmentfault.com/a/1190000004002631