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

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

カテゴリ一覧

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

一覧

2017/07/28

メンテナンス終了のお知らせ

2017/7/25-2017/7/28に実施したメンテナンスは、2017/7/28/14:20に終了いたしました。 ご協力をいただき、ありが…

List

Hnoss

English⇒Japanese

shikimi

English⇒Japanese

sysInfo

English⇒Japanese

tkkobe

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-06-08 16:06:42 Hnoss 0  del.icio.usに追加   はてなブックマークに追加   twitterに投稿   facebookでshare
[ 原文 ] http://brunch.io/docs/using-modules Creative Commons License この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
クリエイティブ・コモンズ・ライセンス
翻訳者ページをみる

この記事の翻訳者

Hnoss さんの翻訳記事

【GitLab Pages 公式 を訳してみた】GitLab Pages 説明書 

GitLab Documentation > User documentation > Projects >GitLab Pages 説明書  GitLabには「GitLab Pages」という機能があります。  GitLab…2017-09-23 12:10:55

SSGを知る②:最近の静的サイト・ジェネレータ事情 | from about GitLab.com

 引き続き、静的サイト・ジェネレータ特集です。  前回は、「静的サイトとは何か」というような内容で終わってしまいましたが、いよいよ本題です。  静的サイト・ジェネレータって…2017-09-23 11:58:35

SSGを知る①:静的 vs 動的 ウェブサイト | about GitLab.com

 ウェブサイトは静的なものと、動的なもの2つに分かれますが、それらにはどのような違いがあって、どのような長所があるのでしょう。  GitLab Pagesで扱えるのはどっちだろう?  静…2017-09-23 11:23:00

【GitLab Pages 公式 を訳してみた】GitLab Pages のこと全部教えます!①

GitLab Documentation > User documentation > Projects > GitLab Pages 説明書 >GitLab Pages のこと全部教えます!① 記事の 種類 : 取扱説明書 || 対象 : 初心者 || …2017-09-23 11:17:34