BROWSERIFYを開始します

JavaScriptの実装は、毎年Webと呼ばれる美しい獣がますます複雑になっています。私たちの多くは現在、JavaScriptモジュールを使用しています。これは、まとまりのある全体として機能するために集まっている独立して機能するコンポーネントですが、Armageddonを引き起こすことなくコンポーネントを喜んで交換できます。私たちの多くはAMDモジュールパターンを使用しており、これをきちんと達成するためにJSを要求しています。

昨年、Browserifyはシーンにヒットし、多くの興奮をもたらしました。ほこりが落ち着き始めたとき、私はBrowserifyが何であるか、それがどのように機能するか、そしてそれをワークフローに追加するためのいくつかのオプションの概要を書きたいと思いました。

キーテイクアウト

browserifyを使用すると、単一のjavascriptファイルに依存関係をバンドルすることにより、ブラウザでnode.jsスタイルモジュールを直接使用できます。

browserifyの使用を開始するには、node.js、npm（デフォルトでnode.jsを使用してインストール）を必要とし、browserify自体を使用します。
• browserifyは、node.jsと同様の「require（） `ステートメントを使用して、プロジェクトの外部ライブラリを含む単純化され、デバッグを容易にするためのソースマップを生成できます。
GulpやGruntなどのNPMスクリプトまたはタスクランナーを使用して、ブラウスリーフィングプロセスを自動化でき、ワークフロー効率を高め、マニュアルバンドルの取り組みを削減できます。
• ブラウジープロジェクトの依存関係の管理は、プロジェクトの詳細と必要なNPMパッケージを指定する「package.json」ファイルで合理化されています。
browserifyは、Babelを使用したトランスピレーションを介したES6モジュールと互換性があり、ソースマップでデバッグをサポートして、エラー追跡を簡単にするために元のソースファイルに戻ることができます。
browserifyとは？
browserifyを使用すると、ブラウザでnode.jsスタイルモジュールを使用できます。依存関係を定義してから、Browserifyはそれをすべて1つのきちんとした整頓されたJavaScriptファイルにバンドルします。必要なjavaScriptファイルをrequire（ './ yourfancyjsfile.js'）ステートメントを使用して含め、NPMから公開されているモジュールをインポートすることもできます。また、Browserifyがソースマップを生成することも非常に簡単です。これにより、各JSファイルがすべて1つに結合されているにもかかわらず、個別にデバッグできます。
• なぜノードモジュールをインポートしますか？
モジュールのインポートは祝福です - javaScriptのライブラリをダウンロードするためにさまざまなサイトにアクセスするのではなく、require（）ステートメントを使用してそれらを含めるだけで、モジュールがインストールされていることを確認してください。 JQuery、Underscore、Backbone、さらにはAngular（非公式の分布として）などの一般的に使用されるJavaScriptライブラリはすべて、作業することができます。すでにノードを実行しているサイトで作業している場合、すべてのJSを構成する1つの一般的な方法でさらに物事を単純化します。私はその概念が本当に好きです。

• 必要なもの

  browserifyを始めるには、必要な最小限は次のとおりです。

  node.js
  npm - これには、デフォルトでノードがインストールされています。
  browserify - これをインストールする方法を説明します。
  JavaScriptモジュールのパックは、飼いならす準備ができています！
  始めましょう
  開始するには、コンピューターにノードとNPMをインストールする必要があります。これらをインストールするためのガイダンスを探している場合は、上記のリンクにアクセスしてください。完全に立ち往生している場合は、パッケージマネージャーを介してnode.jsのインストールに関するこれらの指示を試してください。 browserifyを使用するために実際にノード作業を行う必要はありません。 NPMがそれを実行しているという理由だけで、ノードをインストールしています。 npmを取得したら、次のコマンドを使用してbrowserifyをインストールできます。
  ここで行っていることは、npmを使用してマシンにグローバルにブラウズ化をインストールすることです（-gは、NPMにグローバルにモジュールをインストールするように指示します）。

  npm install -g browserify

  次のことから始まるエラーが発生した場合：

  その後、許可の問題があります。コマンドを繰り返すことはできますが、代わりにこの投稿をチェックすることをお勧めします。

  Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

  最初のbrowserifyファイルを作成
  非常に人気のあるモジュールをインポートするブラウザー化されたJavaScriptファイルを作成することから始めましょう。アンダースコアを使用してスーパーマンを追跡します。 JSファイルMain.jsに電話して、プロジェクトのJSフォルダーに入れました。

  _変数を割り当てて、browserifyのrequire（）ステートメントを使用してjavascriptに掲載することから始めます。

  次に、Underscoreからedagh（）およびfind（）関数を使用します。名前の2つの配列を検索し、コンソールを実行して、スーパーマンを見るかどうかを説明します。非常に高度なものLex Luthorは夢を見ることができました。私たちの最終的なJavaScriptコードは次のようになります：

  Browserifyがプロジェクトに追加しようとするときにNPMモジュールを見つけることができるようにします。そうすることの裸の基本には、端末を開き、JavaScriptプロジェクトを保持するフォルダーに移動し、このコマンドを実行してそのフォルダーにアンダースコアをインストールすることが含まれます。

  <span>var _ = require('underscore');</span>

  ノードとNPMの仕組みに不慣れな人のために、これにより、プロジェクトにnode_modulesというフォルダーが作成され、アンダースコアモジュールのコードが保持されます。コマンドは、https://registry.npmjs.org/underscoreのNPMリポジトリからUnderscoreの最新バージョンを取得します。そのモジュールがnode_modulesフォルダーにあると、browserifyがそれを見つけて使用できるようになりました。

  初めてbrowserifyを実行します

  <span>var _ = require('underscore'),
  </span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
  </span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
  </span>
  _<span>.each([names, otherNames], function(nameGroup) {
  </span>  <span>findSuperman(nameGroup);
  </span><span>});
  </span>
  <span>function findSuperman(values) {
  </span>  _<span>.find(values, function(name) {
  </span>    <span>if (name === 'Clark Kent') {
  </span>      <span>console.log('It\'s Superman!');
  </span>    <span>} else {
  </span>      <span>console.log('... No superman!');
  </span>    <span>}
  </span>  <span>});
  </span><span>}</span>

  browserifyを実行すると、添付のすべてのモジュールを使用して新しいJavaScriptファイルを作成する必要があります。この場合、アンダースコア内にJavaScriptファイルを構築します。この新しいファイルの名前を決定する必要があります。Findem.jsを使用しました。このコマンドをプロジェクトのルートフォルダーから実行します：

  npm install -g browserify

  このコマンドはmain.jsファイルを読み取り、-oオプションで定義されたfindem.jsファイルに出力します。 -dオプションを含めて、ソースマップも生成するようになりました。この方法では、main.jsをデバッグし、別々のファイルとしてきれいにアンダースコアできます。

  browserify出力を使用

  そこから、他のjsファイルと同様にページにファイルを含めるのと同じくらい簡単です：

  独自のJavaScriptファイルのインポート

  Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

  すべてのアプリケーションがノードモジュールから来ることはまずありません。独自のJavaScriptを含めるには、同じ要求（）関数を使用できます。次のJavaScriptの行は、Your_module.jsというJSファイルをGreatestModuleever変数にインポートします：

  このようにJavaScriptをインポートするには、JavaScriptをモジュールとして構成するだけです。そのためには、module.exportsを定義する必要があります。これを行う1つの方法は、以下に示されています

  <span>var _ = require('underscore');</span>

  サイドノート！
  NPMにないJavaScriptライブラリをたくさん持っていて、これらすべてをbrowserifyにする簡単な方法を探している場合は、browserify-shim npmモジュールを使用してこれらのファイルを変換することができます。 。この記事では使用しませんが、一部の開発者はそれを試してみたいと思っているかもしれません。

  <span>var _ = require('underscore'),
  </span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
  </span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
  </span>
  _<span>.each([names, otherNames], function(nameGroup) {
  </span>  <span>findSuperman(nameGroup);
  </span><span>});
  </span>
  <span>function findSuperman(values) {
  </span>  _<span>.find(values, function(name) {
  </span>    <span>if (name === 'Clark Kent') {
  </span>      <span>console.log('It\'s Superman!');
  </span>    <span>} else {
  </span>      <span>console.log('... No superman!');
  </span>    <span>}
  </span>  <span>});
  </span><span>}</span>

  モジュール

  を使用した例

  これがどのように機能するかの簡単な例を示すために、以前のスーパーヒーロー検索の例から配列を取り出し、名前を返す別のJSモジュールに置き換えます。モジュールはそうに見えます：

  次に、名前を使用してそのモジュールをコードにインポートします= require（ './ names.js'）：

  私たちの名前変数は、モジュールからエクスポートされた関数を参照しています。したがって、名前の配列をfindSuperman（）関数に渡すときに、上記の名前変数を括弧付きの関数として使用します。

  npm install underscore

  コマンドラインからコマンドを再度閲覧してコンパイルし、ブラウザでそれを開き、予想通りに実行し、配列の各値を検索し、スーパーマンと見えるかどうかを記録する必要があります。

  browserify js/main.js -o js/findem.js -d

  変数を渡して、アプリ全体でモジュールを共有しますモジュールに変数を渡してモジュールで使用できます。Exports関数であるため、名前の配列が与えられると予想されるFindSuperman.jsというファイルにモジュールを作成します。

  npm install -g browserify

  findSuperman（）関数の返品値を追加しました。スーパーマンが見つかった場合、それは真実に戻ります。それ以外の場合は、falseを返します。このモジュールを使用して、この真/false値を使用するものを決定するのはコード次第です。ただし、上記のモジュールには欠けていることが1つあります。機能にはアンダースコアを使用していますが、宣言していません。モジュール自体でも、そのような上部で宣言することができます：

  Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

  browserifyを使用すると、インポートされているすべてのJSファイルを調べ、1回記載されている各モジュールのみをインポートします。そのため、メインのJSファイルでアンダースコアを要求しており、FindSuperman.jsでそれを必要としていますが、Browserifyがパッケージをすべてアップすると、最終的なJSファイルに1回だけ配置されます。かなりきちんとした正しい？

  実際のJavaScriptアプリは、新しい返品のTrue/False値を備えた新しいモジュールを使用するようになりました。デモの目的のために、簡単なdocument.writeに固執して、私たちの名前からスーパーマンを見つけたかどうかを説明します。

  <span>var _ = require('underscore');</span>

  メインJSファイルにアンダースコアをインポートする必要さえないため、ドラマなしで削除できます。 findsuperman.jsファイルに含めることにより、最終的にインポートされます。
  browserifyのnpm依存関係の管理package.json
  コードも使用したい熱心な友人がいると言います。最初にNPMアンダースコアモジュールをインストールする必要があることを彼らが知っていることを期待するのは少し難しいでしょう。これに対する解決策は、プロジェクトのルートにpackage.jsonというファイルを作成することです。このファイルは、プロジェクトに名前を与えます（ここに名前にスペースがないことを確認してください）、説明、著者、バージョン、そして最も重要なのは、NPM依存関係のリストです。ノードで開発した人のために、ここでまったく同じものを使用しています：

  <span>var _ = require('underscore'),
  </span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
  </span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
  </span>
  _<span>.each([names, otherNames], function(nameGroup) {
  </span>  <span>findSuperman(nameGroup);
  </span><span>});
  </span>
  <span>function findSuperman(values) {
  </span>  _<span>.find(values, function(name) {
  </span>    <span>if (name === 'Clark Kent') {
  </span>      <span>console.log('It\'s Superman!');
  </span>    <span>} else {
  </span>      <span>console.log('... No superman!');
  </span>    <span>}
  </span>  <span>});
  </span><span>}</span>

  依存関係のリストは現在、単一の「アンダースコア」：「1.6.x」に限定されています。依存関係の最初の部分は名前、2番目の部分はバージョンです。最新または *がNPMが持っている最新バージョンを取得します。または、1.6（バージョン1.6の場合）や1.6.xなどの数字を入力することもできます（1.6.0までは1.7までですが、1.7までは含まれていません）。

  依存関係としてbrowserifyを含めることもできますが、プロジェクトを実行するのは依存関係ではありません。アプリのユーザーは、browserifyを実行する必要なくスーパーマンを見つけることができます。これは当社の開発者の1つです。開発者がこのアプリを更新するために必要なモジュールです。

  Package.jsonファイルがあります。NPMインストールアンダースコアを実行する必要はありません。 NPMインストールを実行するだけで、必要なすべての依存関係がnode_modulesフォルダーにインストールされます。

  browserifyプロセスの自動

  ファイルを変更するたびにコマンドラインでbrowserifyを実行することは迷惑であり、まったく便利ではありません。幸いなことに、browserifyの実行を自動化するためのいくつかのオプションがあります。

  npm

  npm自体は、手動で入力してきたものと同じようにコマンドラインスクリプトを実行できます。そうするために、スクリプトセクションをパッケージに配置するだけです。

  それを実行するには、コマンドラインで次のと入力できます。

  npm install -g browserify

  しかし、それは十分に便利ではありません。毎回そのコマンドを手動で実行する必要があります。それは迷惑です。したがって、より良いオプションは、Watchifyと呼ばれるNPMモジュールを使用することです。 Watchifyは簡単です、それは簡単で、それは大きな時間のセーバーです。 JSの変更と自動的に再実行されるブラウジーを自動的に再実行します。

  これをPackage.jsonに入れるには、開発者に追加して、JSを見るための新しいスクリプトを含めます（JSを変更する必要なくJSを構築したい場合は、そこにbuild-jsを残します。ファイル）。

  Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

  これを実行するには、次のコマンドを入力するだけです

  それは走り、その魔法を機能させます。何が起こっているのかをあなたに知らせることはあまり言いませんが、それは混乱する可能性があります。それが何をしているのかについて詳細を提供することをお勧めします。

  <span>var _ = require('underscore');</span>

  それは、実行するたびにこのようなフィードバックを提供します：
  NPMのソースマップの生成

  <span>var _ = require('underscore'),
  </span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
  </span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
  </span>
  _<span>.each([names, otherNames], function(nameGroup) {
  </span>  <span>findSuperman(nameGroup);
  </span><span>});
  </span>
  <span>function findSuperman(values) {
  </span>  _<span>.find(values, function(name) {
  </span>    <span>if (name === 'Clark Kent') {
  </span>      <span>console.log('It\'s Superman!');
  </span>    <span>} else {
  </span>      <span>console.log('... No superman!');
  </span>    <span>}
  </span>  <span>});
  </span><span>}</span>

  NPMを使用してソースマップを生成するには、browserifyまたはwatchifyコマンドの後に-dを追加します。
  Debuggingの-dとverbose出力用の-vの両方を使用すると、そのように組み合わせることができます：

  npm install underscore

  grunt

  browserify js/main.js -o js/findem.js -d

  多くの人（私自身を含む）は、しばらくの間グラントを使用しており、それにかなり慣れています。幸いなことに、それらの種類のために、ブラウジー化はグラントビルドでもうまく再生されます！

  gruntを使用するには、package.jsonファイルを変更する必要があります。スクリプトセクションを使用することはなく、代わりにそのgruntに依存します。代わりに、いくつかの新しい開発者依存関係を追加します：

  <span><span><span><script</span> src<span>="js/findem.js"</span>></span><span><span></script</span>></span></span>

  依存関係に追加されました：

  greatestModuleEver <span>= require('./your_module.js');</span>

  grunt - プロジェクトのためにグラントがインストールされていることを確認してください。

  grunt-browserify - gruntをbrowserifyを実行できるモジュール。

  grunt-contrib-watch - ファイルを視聴し、変更するたびにブラウズ化するモジュール。
  次に、プロジェクトのルートでgruntfile.jsというファイルを作成します。このグラントファイル内には、次のものがあります

  module<span>.exports = function(vars) {
  </span>  <span>// Your code
  </span><span>}</span>

  パッケージに必要なNPMモジュールをロードすることから、Gruntファイルで開始します。

  実行したいタスクの唯一のグループをデフォルトのタスクとして登録します（browserify and watch）：
  • grunt initconfigオブジェクトをセットアップします（すべてのgruntファイルがこれを探します）：
  • その中で、私たちは包装ファイルがどこにあるかを指摘します：

  npm install -g browserify

  browserifyの設定が次にあり、基本的にソースJSファイルがブラウザー化されたコードとそれを構築するファイルを使用する場所に設定します：

  Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

  次に、JSフォルダーに変更が変更されるたびに、ブラウスリー化タスクを再実行するためにWatchタスクを設定しました：

  <span>var _ = require('underscore');</span>

  新しい開発者の依存関係があるため（プロジェクトにはうなり声がインストールされておらず、これらのモジュールのいずれもありません）。最初にNPMをインストールする必要があります。モジュールを実行してインストールすることを許可したら、これまでにないシンプルなGruntCommandを実行して、プロジェクトの視聴を開始できます。

  Gruntのソースマップの生成

  Grunt-Browserifyのバージョン2.0.1を使用すると、ソースマップを定義する必要がある方法が変更され、オンラインで多くのガイドが間違っています。あなたのためにソースマップを生成するためにGruntとBrowserifyを取得する正しい方法は、デバッグを追加することです。

  複雑な外観のオプションのセットアップは、将来のブラウジーオプションを素晴らしく簡単に互換性のある方法で含めることを可能にすることを目的としています。

  gulp

  <span>var _ = require('underscore'),
  </span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
  </span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
  </span>
  _<span>.each([names, otherNames], function(nameGroup) {
  </span>  <span>findSuperman(nameGroup);
  </span><span>});
  </span>
  <span>function findSuperman(values) {
  </span>  _<span>.find(values, function(name) {
  </span>    <span>if (name === 'Clark Kent') {
  </span>      <span>console.log('It\'s Superman!');
  </span>    <span>} else {
  </span>      <span>console.log('... No superman!');
  </span>    <span>}
  </span>  <span>});
  </span><span>}</span>

  GulpはBrowserifyのタブロイド愛好家です。 Webの周りの記事は、2つを非常に頻繁にペアにします。ブラウジー化とGulpです。 BrowserifyファンはGulpを使用する必要があるとは言いません。それは主に異なる構文の間の個人的な好みです。 （上記で見たように）NPMまたはGruntを非常に喜んで使用して、ブラウスリーフィファイルを構築できます。私は個人的には、小規模なプロジェクトのためのクリーンでシンプルなNPMビルドプロセスのファンです。

  上記をガルプで行うには、Gulpをグローバルにインストールすることから始めます。
  package.jsonファイルを更新して、必要ないくつかの新しい開発依存関係を含めます。
  以下を追加しました：

  npm install underscore

  Watchify - これをNPMの例でも使用しました。同じモジュール。
  gulp - そのすべてのガルプの良さを私たちに与えるためのかなり重要なモジュール！

  browserify js/main.js -o js/findem.js -d

  ビニールソースストリーム - これは、入力を取得し、どこかに配置するためにファイルを返すモジュールです。

  Browserifyには、Gulpで直接使用できる出力用のストリーミングAPIがあります。ガイドの束は、Gulp-Browserifyプラグインを使用することを提案しますが、Browserifyはこれを推奨せず、BrowserifyのストリーミングAPI出力を使用することを好みます。ビニールソースストリームを使用して、このbrowserify出力をピックアップし、どこかに出力できるようにファイルに配置します。
  • 次に、プロジェクトのルートでgulpfile.jsというファイルを作成します。これは、すべてのGulp機能が進む場所です：
  NPMモジュールにインポートすることから始めます。これはかなり自明です。 次に、ビルド用に3つの変数を設定します：
  • • sourceFile - ブラウスライドされたファイルの場所とファイル名（この場合はJS/main.js）
    • Destfolder - フォルダーの場所最終ファイルを
    に出力しています
    • destfile - ファイナルファイナルファイルに

    コードを以下でもう少し詳しく説明します。

    どのようにブラウズ化とgulpが一緒に動作するか

    私たちの最初のタスクは、私たちがそうするように定義する私たちのブラウスレイフィスです：

    npm install -g browserify

    最初にmain.jsファイルをbrowserify npmモジュールに渡します：

    Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

    次に、browserifyストリーミングAPIを使用して、JavaScriptコンテンツを使用して読み取り可能なストリームを返します。

    <span>var _ = require('underscore');</span>

    そこから、Filename Findem.jsを使用してファイルにパイプしてから、それをGulpにパイプしてJSフォルダーに入れます。
    基本的に、私たちの最終プロジェクトに出てくるさまざまな段階を通じて入力を取得しています。 Watchifyとgulp

    <span>var _ = require('underscore'),
    </span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
    </span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
    </span>
    _<span>.each([names, otherNames], function(nameGroup) {
    </span>  <span>findSuperman(nameGroup);
    </span><span>});
    </span>
    <span>function findSuperman(values) {
    </span>  _<span>.find(values, function(name) {
    </span>    <span>if (name === 'Clark Kent') {
    </span>      <span>console.log('It\'s Superman!');
    </span>    <span>} else {
    </span>      <span>console.log('... No superman!');
    </span>    <span>}
    </span>  <span>});
    </span><span>}</span>

    を組み合わせて

    前述のように、ファイルを更新するときに自動的に実行する方がはるかに簡単であるため、Browserifyを直接使用するのは少し面倒です。これを行うには、Watchify NPMモジュールを再度使用します。

    Watchというタスクをセットアップすることから始めます（必要に応じてWatchifyと呼ぶことができます...本当にここであなた次第です）：

    2回使用するため、watchifyモジュールをバンドラー変数に割り当てます：

    npm install underscore

    次に、更新イベントが呼び出されるたびにRebundle（）と呼ばれる関数を実行するイベントハンドラーを追加します。基本的に、Watchifyがファイルの変更を確認するたびに、Rebundle（）：

    を実行します

    では、rebundle（）とは何ですか？それはまさに私たちのBrowserifyタスクが上で行っていたことです：

    browserify js/main.js -o js/findem.js -d

    鋭いJavaScriptの最適化でbrowserifyと監視の両方をマージすることは可能ですが、この記事には、物事をシンプルに保つためにそれらを別々に残すことにしました。これの印象的でより複雑な例については、ダンテロのスターターガルプファイルをご覧ください。

    <span><span><span><script</span> src<span>="js/findem.js"</span>></span><span><span></script</span>></span></span>

    gulpfile.jsを終了するには、デフォルトのタスクがgruntのデフォルトタスクと同じように機能するデフォルトタスクを定義します。

    上記のGulpコードを実行するには、3つのオプションがあります。最も簡単な方法は、作成したデフォルトのタスクを実行することです。コマンドラインに1つの単語のみが必要です。

    greatestModuleEver <span>= require('./your_module.js');</span>

    それはブラウスリーファイタスクを一度実行し、ウォッチタスクは変更のためにファイルの視聴を開始します。 ブラウズライフィングタスク：を具体的に実行することもできます
    または時計タスク：

    module<span>.exports = function(vars) {
    </span>  <span>// Your code
    </span><span>}</span>

    Gulpとbrowserifyを使用してソースマップを生成します

    JavaScriptのソースマップを生成するには、両方のbundle（）関数に{debug：true}を含める。

    module<span>.exports = function() {
    </span>  <span>return ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen', 'Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'];
    </span><span>}</span>

    ブラウスリーフィングタスクは次のようになります：

    時計のタスクのrebundle（）関数は次のようになります：

    npm install -g browserify

    結論

    browserifyにとってはまだかなり早い時期であり、時間が経過するにつれて確実に進化し成熟します。現在の状態では、モジュラーJavaScriptを構築するための非常に便利なツールであり、バックエンドでノードを使用している人にとって特に素晴らしいです。プロジェクトのフロントエンドとバックエンドの両方でNPMモジュールを使用すると、コードはノード開発者にとってはるかにクリーンになります。概要を示していない場合は、次のJavaScriptプロジェクトで試してみて、それがあなたの世界を揺るがすかどうかを確認してください。

    その他のリソース
    他のブラウジーリソースがたくさんあります。あなたがチェックしたいかもしれないいくつかの便利なビットとピース：
    Browserify Handbook - James HallidayのBrowserifyの開始に関する非常に貴重なハンドブック。間違いなく読む価値があります！
    gulp browserify：dan telloによるすべての投稿 - より高度な使用法を示す本当に徹底的な記事。
    • そして、そのうなり声と要求が出ているように、それはすべてGulpとBrowserifyのすべてです - Martin Genevは、ブラウジーの突然の変換と例を例に挙げて語っています。
    gulp.jsの紹介 - Craig BucklerによるGulpの使用方法の詳細。
    browserifyの開始に関するよくある質問（FAQ）
    browserifyは、開発者がブラウザで使用するためにコンパイルするnode.jsスタイルモジュールを作成できる開発ツールです。 Browserifyを使用すると、すべての依存関係をバンドルすることで、ブラウザに（「モジュール」）を要求できます。このツールは、ほとんどのNPMパッケージをブラウザで直接使用できるため、開発プロセスを大幅に高速化できるため、特に便利です。他のモジュールバンドラーとは異なり、Browserifyは、開発者がブラウザ用のnode.jsスタイルモジュールを作成できるように特別に設計されています。これは、単一のスクリプトタグでブラウザまで提供できるバンドルをビルドするために、アプリのすべてのrequire（）呼び出しを再帰的に分析することで行います。 Browserifyにはリッチなプラグインエコシステムもあります。これにより、ビルドを大幅にカスタマイズできます。パッケージマネージャー）。このコマンドは「NPMインストール-G Browserify」です。インストールしたら、コマンドラインから使用してjavaScriptファイルをバンドルできます。
    プロジェクトでbrowserifyを使用するにはどうすればよいですか？
    browserifyを使用するには、まずコードを使用してコードを記述する必要があります。 CommonJSモジュール形式。次に、コマンドラインからbrowserifyを使用して、メインのJavaScriptファイルとそのすべての依存関係を単一のファイルにバンドルできます。このバンドルされたファイルは、スクリプトタグを使用してHTMLファイルに含めることができます。 ​​はい、browserifyでes6モジュールを使用できますが、babelのようなトランスピラーを使用して、browserifyが理解できるES5コードに変換する必要があります。 。これは、BabelとThe Babelify Transformをインストールし、Br​​owserifyコマンドでそれらを使用することでこれを行うことができます。ほとんどのNPMパッケージをブラウザで直接使用します。これを行うには、まずNPMを使用してパッケージをインストールする必要があります。次に、JavaScriptファイルにパッケージを要求することができ、browserifyはそれがバンドルに含まれていることを確認します。コードを変換します。たとえば、Babelify Transformを使用してES6コードをES5コードにコンパイルできます。変換はグローバルにまたは特定のファイルに適用でき、プロジェクトで複数の変換を使用できます。
    バンドルコードをデバッグするにはどうすればよいですか？マップは、バンドルされたコードをデバッグするのに役立ちます。ソースマップを生成するには、browserifyコマンドで「–debug」オプションを使用できます。これには、バンドルにソースマッピングデータが含まれます。これは、ブラウザの開発者ツールで使用してコードをデバッグするのに役立ちます。 🎜>はい、GulpやGruntなどのタスクランナーでBrowserifyを使用できます。 GulpとGruntの両方に、Browserifyをビルドプロセスに統合するために使用できるプラグインがあります。これにより、JavaScriptファイルをバンドするプロセスを自動化するのに役立ちます。生産用にバンドルを最適化するにはどうすればよいですか？
    Browserify Bundleを生産用に最適化する方法がいくつかあります。一般的な方法の1つは、uglifyjsのようなツールを使用してバンドルをマイニングすることです。また、「Tinyify」プラグインを使用することもできます。これは、バンドルにさまざまな最適化を適用して可能な限り小さくするブラウスリーライフプラグインです。

以上がBROWSERIFYを開始しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。