ドキュメント>JSモジュールとNPMを使う

法律: IT HTML5 フノス(訳者)

 ➡まとめページで見る

 まず最初に

  モジュールを使ってJSコードを組み立てることが、Brunchの肝というものです。JSコードを必要なところに必要な分だけ配置することが簡単に行えます。

  Brunchでは、「ファイル名」がモジュール名を兼ねています。当ソフトはモジュール名(つまりファイル名)を参照してアプリのポーションを切り分ける方式を取っています。
  たとえば、「app/config.js」という名前のファイルがあったなら、「config.js」の部分がモジュール名になります。
  たいていのJSファイルは「module.exports」で、モジュールに変換できます。これについてはNode.jsと同じです。

// app/config.js
module.exports = {
 api: {
  host: 'brunch.io'
 }
};  

他にモジュールを追加する場合は、「require」を使ってモジュールを指定してください。指定する名前は、「config.js」のように拡張子が付いていても、「config」のように拡張子がなくても構いません。

const config = require('config');
makeRequest(config.api, 'GET', 'plugins');


 モジュールはロード時やアプリ起動の際に適用されるべきです。ブラウザでHTMLをロードする時に、エントリーモジュールもロードさせる必要があります。その設定は次のように行ってください。

 

// brunch-config
 module.exports = {
  modules: {
   autoRequire: {
    // outputFileName : [ entryModule ]
    'javascripts/app.js': ['エントリーモジュール名']
   }
  }
};

 モジュールの種類

 Bruchは一部JSモジュールスタイルに対応しています。

 

 どのスタイルもプロジェクトに適用することは可能です。 ですが、最近だんだんとCommonJSがモジュールのスタンダードになりつつあるせいか、BrunchならびにNPMインテグレーションの中には、CommonJSでしか動作しない機能もあるので注意が必要です。 なおかつ、たいていの機能がCommonJSで動作可能なことから、CommonJSを選択しておくのが無難といえるでしょう。 

 

 NPMインテグレーション

  Brunchでは、クライアント側のシステムとしてNPMパッケージマネージャーの使用が可能です。

 Nodeモジュールを使う

  NPMインテグレーションは、 Brunch 2.3デフォルトの状態ですでに使用できます。これといった設定は要りません。インストールは、「npm install --save」で実行できます。通常はフロントエンドパッケージが多いNPMですが、アプリに使えるものもあり、Brunchはそれにも対応します。

 ただし、ご使用の際は /^node_modules/ の記述をお忘れなく。

files: {
 javascripts: {
  joinTo: {
   'js/app.js': /^app/,
   'js/vendor.js': /^(?!app)/ // We could also use /node_modules/ regex.
  }
 }
}


モジュールスタイルを取り入れる

  Brunchは、クライアント側ライブラリのスタイルを扱えます。「styles」の中には、パッケージ名などのキーバリュー・オブジェクトやパッケージに関連したスタイルのパスを記載できます。パスはなるべくこの中に書き込んでください。

npm: {
 styles: {
  leaflet: ['dist/leaflet.css']
 }
},
files: {
 javascripts: {
  joinTo: {'js/vendor.js': /^node_modules/}
 },
 stylesheets: {
  joinTo: {'css/vendor.css': /^node_modules/}
 }
}


NPMパッケージから取得したアセット(画像やフォントなど)は、手動でpublicフォルダにコピーしなくてはなりません。ただし、コピーにNPMのpostinstallフックを使うことはできます。詳しくはFAQをご覧ください。

 パッケージを表示する

 npmパッケージをウィンドウに表示することは可能です。そのためにわざわざモジュールをそろえる必要はありません。詳しくはこちらをご覧ください。

 Hot Module Replacement

 Brunchはhmr-brunchプラグインという手段ではありますが、Hot Module Repulacementに対応しています。これについてはREADMEに詳しく書いてあります。

 Bowerを使う

 フロントエンドパッケージは事実上NPMが主流ではありますが、BrunchではBowerも使えます。どうしてもNPMではなくBowerを使う必要が出てきたら、「vendor」にこれらをコピーしてください。

 NPMの使い方においては、先ほど説明しましたので割愛します。

 Bowerパッケージをプロジェクトに追加するには

  それから、この問題についてはもう一つ対策があります。npm post-install スクリプトを使う方法です。これでコンパイル時にconfig hooksなどを制御します。

"scripts": {
 "postinstall": "cp -r node_modules/font-awesome/fonts public/fonts"
}


 overrideの依存package.json / bower.jsonパッケージを手に入れることができます。

 ただし、入手したpackage.jsonは、bower.jsonと同列に扱われます。

"dependencies": {
 "some-awesome-package": "~0.0.1"
},
"overrides": {
 "some-awesome-package": {
  "main": "./lib/just_one_component.js"
 }
}

 ←プラグインを使う

 テスト

 GitHubでこのページを編集する

 2017-06-08 16:06:42 / Hnoss
原文サイトを表示
[ 原文 ] http://brunch.io/docs/using-modules
Creative Commons License この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
クリエイティブ・コモンズ・ライセンス