「みんなの翻訳」は、世界中の文書をみんなで協力して翻訳するサイトです。

みんなの翻訳ロゴ
ブクタブ
翻訳サイト

カテゴリ一覧

このサイトについて 新規登録はこちら お試し翻訳

一覧

2015/07/07

復旧のお知らせ

2015/06/08 ~ 2015/07/07 の期間、サーバ障害によりサービスが利用できない状況になっておりました。 現在は復…

List

Hnoss

English⇒Japanese

shikimi

English⇒Japanese

K0hei22

English⇒Japanese

mayuko

English⇒Japanese

ホーム新着翻訳記事一覧 > 新着翻訳記事

新着翻訳記事

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

 

 まず最初に

  モジュールを使って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をロードする時に、エントリーモジュールもロードさせる必要があります。その設定は次のように行ってください。

  • <script>require('エントリーモジュール名');</script> - と追記します。このとき、エントリーモジュールのファイル名は「app/エントリーモジュール名.js」となっているはずです。 もしくは、 
  • コンフィグに自動読み取り設定 (日本語版:コンフィグ,modulesの部分)を書き込むという手もあります。設定は次のように行ってください。

 

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

 モジュールの種類

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

 

  • CommonJS (default)
  • AMD
  • Custom wrapper & definition
 どのスタイルもプロジェクトに適用することは可能です。 ですが、最近だんだんと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パッケージをプロジェクトに追加するには

  • Bowerで開発が可能になるように、「bower.json」を作成します。
  • bower.jsonの「dependencies」という場所にパッケージを追加します。
  • オプションとしてoverrides property を導入することをおすすめします。これはBowerには直接関係がありませんが、BrunchがBowerを自動コンパイルするのに必要です。
  • overridesがBowerの動作に影響を及ぼすことはありません。オリジナルの従属グラフはbower installとそっくり同じもになるでしょう。しかし、実際は依存関係を変えた方が効率が上がることも考えられますので、overridesをプロジェクトのどこにビルドするかは適宜変更して構いません。
     
  それから、この問題についてはもう一つ対策があります。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でこのページを編集する

 
PDF
更新日:2017-05-15 18:07:45 Hnoss 0  del.icio.usに追加   はてなブックマークに追加   twitterに投稿   facebookでshare
[ 原文 ] http://brunch.io/docs/using-modules Creative Commons License この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
クリエイティブ・コモンズ・ライセンス
翻訳者ページをみる

この記事の翻訳者

Hnoss さんの翻訳記事

食べ物解説 - スヴァネティ・ソルト

Bassa's Blog | 2013/09/05投稿  スヴァネティ・ソルト(Svanetian salt/სვანური მარილი)とは、グルジア(ジョージア)北西部にある山がちな地方スヴァネティにおいて食される調…2017-05-27 22:18:55

チーズがとろける焼きマッシュ (グルジア/ジョージア料理)

グルジアン・レシピ | 2013/03/29投稿  スルグニ・チーズ(Sulguni cheese/სოკო კეცზე)とマッシュルームを使った料理を紹介しましょう。焼くときにジョージア伝統の素焼き皿“kets…2017-05-27 15:03:06

トマトとスパイスの豆料理 (グルジア/ジョージア料理)

グルジアン・レシピ | 2013/08/02投稿  グルジア語では、豆のことをロビオ(Lobio/ლობიო)といいます。ジョージアにはたくさんの豆料理があります。   ここではその中でも、トマト…2017-05-27 14:21:33

グリーントマト、ニンジン、玉ねぎで作る フリード (グルジア/ジョージア料理)

グルジアン・レシピ |  2013/10/22投稿  グリーントマトはグルジア料理ではよく使われる具材です。特に、マリネやナッツが入ったレシピではよく使われています。ここではそのグリ…2017-05-27 13:28:04