Node.js
Browserfiyを使用してブラウザで「必須」エラーを解決する
サーチ…
例 - file.js
この例では、 file.jsというファイルがあります。
JavaScriptとNodeJSクエリ文字列モジュールを使用してURLを解析する必要があるとしましょう。
これを行うには、ファイルに次の文を挿入するだけです。
const querystring = require('querystring');
var ref = querystring.parse("foo=bar&abc=xyz&abc=123");
このスニペットは何をしていますか?
最初に、URLクエリ文字列の解析と書式設定のためのユーティリティを提供するクエリ文字列モジュールを作成します。次の方法でアクセスできます。
const querystring = require('querystring');
次に、.parse()メソッドを使用してURLを解析します。 URLクエリ文字列(str)をキーと値のペアの集合に解析します。
たとえば、クエリ文字列'foo=bar&abc=xyz&abc=123'
は次のように解析されます。
{ foo: 'bar', abc: ['xyz', '123'] }
残念ながら、ブラウザにはrequireメソッドが定義されていませんが、Node.jsでは定義されていません。
ブラウザをインストールする
Browserifyを使用すると、Nodeで使用するのと同じ方法でrequireを使用するコードを記述できます。だから、どうやってこれを解決するのですか?それは簡単です。
- npmに同梱されている最初のインストールノード。それから:
npm install -g browserify
- あなたのfile.jsがされているディレクトリに変更し、NPMと私たちのクエリ文字列のモジュールをインストールします。
npmはクエリ文字列をインストールします
注意:特定のディレクトリで変更しないと、モジュールを含むファイルが見つからないため、コマンドは失敗します。
- 次に、file.jsから始まる必要なモジュールを、bundle.jsという名前のファイル(または名前を付けたい名前)に、 browserifyコマンドで再帰的にバンドルします。
browserify file.js -o bundle.js
Browserifyは、 require()呼び出しのための抽象構文木を解析して、依存関係グラフ全体をトラバースします。
- 最終的にあなたのhtmlに単一のタグをドロップし、完了です!
<script src="bundle.js"></script>
あなたの古い.jsファイル( file.jsと同じ )と新しく作成されたbundle.jsファイルの組み合わせが得られます。これら2つのファイルは1つのファイルに統合されます。
重要
file.jsを変更したい場合は、プログラムの動作には影響しません。 新しく作成したbundle.jsを編集すると、変更内容が有効になります
どういう意味ですか?
つまり 、何らかの理由でfile.jsを編集したい場合、その変更は影響を与えません。 bundle.jsとfile.jsをマージするので 、 bundle.jsを実際に編集する必要があります 。