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

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

カテゴリ一覧

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

一覧

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 さんの翻訳記事

僕がHugo静的サイト・ジェネレータをGitLabで使うときにしたCI設定 | from Leow Kah Man - Tech Blog

 週末にかけて、GitHubに構えていた私のブログをGitLabに移転しました。GitLabだとCIビルドが自動的にできるところが便利です。  僕はGitLabのレポジトリにNodeJS Dockerイメージを構…2017-11-18 13:00:02

【GitLab 公式 を訳してみた】Dockerイメージを使う

GitLab Documentation > GitLab Continuous Integration (GitLab CI) > Docker integration >Dockerイメージを使う  GitLab CIは、GitLab ランナーと連携して、Dockerエンジンを様…2017-11-18 00:10:16

【GitLab 公式 を訳してみた】 .gitlab-ci.yml 設定メニュー

 (訳者より:翻訳がもうだいぶ進んだところで、GitLab CIについてネットで検索をかけてみたところ、 Qiitaにてynott様が公開されたバージョン があることに気がつきました。  原…2017-11-17 23:50:27

【GitLab 公式 を訳してみた】GitLab CI/CDで使える変数

GitLab Documentation > GitLab Continuous Integration (GitLab CI) >GitLab CI/CDで使えるAPI変数  GitLab ランナーは、CIから送られてきたjobをもとに、ビルド環境を整えます。…2017-11-17 23:50:02