Hnoss

Hnoss

誰かのひと手間を省こう。
カレンダー

文書タグ

フノス(訳者)(62) IT(42) 解説記事(23) HTML5(18) Libre Music(18) DTM(18) Linux(15) オープンソース(14) 百科事典(13) プラグイン(13) 録音(11) 文化(11) ミキシング(11) メディア(11) MIDI(10) ソフトウェア(9) シーケンス(8) マスタリング(7) 芸能(7) 音楽編集(7) JACK(4) 音楽(4) 経済(4) 業務効率化(3) GNU(3) DAW(3) Ardour(3) Windows(3) Android(3) バト(2) ウィッカ(2) 欧州(2) GPL(2) アニメ(2) オカルト(2) アニメーション(2) GNOME3(2) 西アジア/中東(2) スマホ(2) 牛(2) 北米(2) 歴史(2) 映像制作(2) ERPシステム(2) PlayStation(2) 古代エジプト(2) 社会(2) Krita(2) ERP(2) 有角神(2) ワークフロー(2) エジプト(2) ソーシャルメディア(2) OS X(2) アプリ(2) ハトホル(1) パン(1) 地方(1) Papagayo(1) 羊神(1) ギリシャ(1) 高速道路情報無線(1) 中南米(1) モヘンジョ=ダロ(1) 学校(1) 悪魔(1) ラジオ(1) アップストリーム・パッケージング(1) アレクサンドロス大王(1) ローマ(1) ポッドキャスト(1) パシュパティ(1) 音楽プレーヤー(1) アピス(1) 宗教(1) テレビ(1) アンビソニック(1) ポータブルソフトウェア(1) 船乗りの柱(1) シリア(1) GPS(1) サウンドフォント(1) アフリカ(1) リグ・ヴェーダ(1) ロスレス音源(1) F-Droid(1) ムネヴィス(1) ネオペイガニズム(1) コミュニティ放送(1) バイノーラル(1) リーナス・トーバルズ(1) 元ネタ(1) ケルヌンノス(1) ナイジェリア(1) Python(1) 聖書(1) 任天堂 DS(1) スタジオジブリ(1) 魔女宗(1) アクティブSETI(1) VR(1) 意味(1) コシディウス(1) インド(1) ユーコン(1) 国際(1) ヤーウェ(1) CD(1) タブレット(1) Synfig(1) 羊(1) ベルゼブブ(1) デジタルサイネージ(1) VST(1) 料理(1) 由来(1) グンデストルップの大釜(1) カナン(1) カナダ(1) 国際公文書館会議(1) 詩篇(1) チップチューン(1) バ・ネブ・デデト(1) コットン・マザー(1) クラウドキャスティング(1) ジョージア(1) エリファス・レヴィ(1) マサチューセッツ(1) 考古学(1) 申命記(1) Blender(1) クヌム(1) 魔女裁判(1) オンデマンド(1) KXStudio(1) グルジア(1) バフォメット(1) トヨタ(1) 黙示録(1) アモン(1) セイラム魔女裁判(1) ねじ巻きラジオ(1) ALSA(1) 東ヨーロッパ(1) イボ人(1) キリスト教(1) レビ記(1) OpenToonz(1) アマナイ(1) 広告(1) イケンガ(1) Java(1) コマンド(1) ユダヤ教(1) ウルガタ聖書(1) 科学技術(1) BountySource(1) 出エジプト記(1) 観光案内(1) パキスタン(1) 教育(1)
ブックマークタグ

登録情報はありません。
リファレンス

first-time visitors
user guide
謝辞

「みんなの翻訳」は情報通信研究機構言語翻訳グループ東京大学図書館情報学研究室による共同プロジェクトであり、三省堂国立情報学研究所連想情報学研究開発センターが開発に協力しています。三省堂には「グランドコンサイス英和辞典(36万項目収録)」の使用を許可していただきました。

連携研究グループはこちらをご覧ください。

「みんなの翻訳」を使っている翻訳グループについてはこちらをご覧ください。

バナー

logo

ポスター

poster

フライヤー

poster poster
Mozilla Firefox ブラウザ無料ダウンロード
本サイトはブラウザ「Mozilla Firefox」推奨です。
Firefox3で動作確認しています。

Valid XHTML 1.0 Transitional

site_image
Brunch: Using JS modules and NPM
http://brunch.io/docs/using-modules
Hnoss Hnoss     最終更新:2017-05-15 18:07:45    PDF


まず最初に

 モジュールを使って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でこのページを編集する

原文:http://brunch.io/docs/using-modules
Creative Commons License
この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
クリエイティブ・コモンズ・ライセンス外部リンク
新着文書(Hnoss)

FYDZHIN – OSSETIAN MEAT PIE
グルジアン・レシピ |  2014/06/29投稿  伝統的なオセチアの味・Fydzhinの作り方をご紹介しましょう。  オセチア料理の中でもかなりの人気を...
Web animation using CSS and JavaScript
2016年9月27日投稿   Nikhil Sukul  DrupalCon Dublin 2016にて、私ことNikhil SukulはVidit Anjariaとアニメーションについて議論する予定です...
Brunch - ultra-fast HTML5 build tool
ビルドツールでお悩みなら、 Brunchを使ってみてください! Brunchは、つぎはぎでゴチャゴチャなHTMLを、きれいにまとめる最高のツールです。 ...
3 open source boilerplate web design templates
 ウェブデザインの世界にも、「テンプレート」というものが存在します。  これを使えば、先進的なコードベースを設計することも、難しくはありませ...

新着文書

IMLS for now survives Trump’s effort to kill it—but keep fighting with 2018 budget in mind!
ドナルド・トランプは他の多くのサービスの中で、博物館と資金繰りの苦しい中で電子書籍の普及をした、些細ではあるが、大きい衝撃のあった図書館制...
Will you want your parents’ paper books?
自分の両親が亡くなる時に彼らの持っていた本を欲しいと思うだろうか。 私の父は長年の時計研究者かつ古時計の修理工である。彼からの最近のメールで...
Obama Should Heed Hiroshima’s Survivors / By Amy Goodman & Denis Moynihan
オバマ大統領が広島(世界初の原子爆弾攻撃の場)を訪問するということを、今週、ホワイトハウスが発表した。彼はその場所を訪れる初の現職の大統領...

新着Wikipedia翻訳

End-user computing
エンドユーザ・コンピューティング エンドユーザ・コンピューティング(EUC: End-user computing)は、プログラマではない人が、動くアプリケーショ...
AppImage - Wikipedia
 AppImageはLinuxにおける ポータブルソフトウェア の配布形式で、アプリケーションのインストールの際に スーパーユーザー を必要としないこと...

更新履歴

※文書量によっては処理に数十秒かかる場合があります
バージョン 比較対象 更新日時 更新者
1(最新) 2017-05-15 18:07:43 Hnoss
2 2017-05-15 18:06:57 Hnoss
3 2017-05-15 18:06:21 Hnoss
4 2017-05-10 22:17:45 Hnoss
5 2017-05-10 22:17:03 Hnoss
6 2017-05-10 21:23:39 Hnoss
7 2017-05-10 21:23:37 Hnoss
8 2017-05-10 21:22:48 Hnoss
9 2017-05-10 21:21:32 Hnoss
10 2017-05-10 21:20:46 Hnoss

    
ブックマーク登録

タグを「;(半角セミコロン)」区切りで入力して下さい(例)tag1;tag2;tag3
10タグまで登録可能。各タグ30文字まで

履歴
状態 作業中 作業予定あり 作業予定なし 作業完了
テーマ 社会 政治 法律 経済 文化 芸能 科学技術 IT 健康/医療 スポーツ メディア 植物 動物 菌類 地方 国際
地域 日本 東アジア アフリカ 南アジア 東南アジア 西アジア/中東 太平洋 北米 中南米 欧州
ジャンル ニュース 解説記事 論文 日記 百科事典

コメントを入力して下さい
0 / 250
    
ブックマーク登録

ブックマークに登録しました。


言語選択

    
ファイルプロパティ

使用許諾条件
ファイル情報
あなただけがこのファイルを閲覧・編集できます。
みんながこのファイルを閲覧できますが、
編集ができるのはあなただけです。
あなたに加えて、指定された人やグループが
このファイルを自由に閲覧・編集できます。
公開設定
編集設定
グループ:0組 翻訳者:0人
    
アクセス属性
この文書は「非公開」設定になっています。
一般公開する場合は、編集ページの書誌情報で「公開」設定に変更して下さい。
翻訳者選択

※メニュー「翻訳者管理」で翻訳者、グループを追加することができます。


    
ノート

非公開ノート
0 / 2000 ※「公開・編集」権限を持つ翻訳者のみに公開されます。
公開ノート
0 / 2000 ※文書を「公開」にした場合、一般に公開されます。

言語選択

 →