Hnoss

Hnoss

いつか、海外の実話系怪談とか見つけられたらいいな…という。頭の片隅にある夢ですね。
カレンダー

文書タグ

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

What is Docker?
 Dockerはコンテナを使ったアプリケーションの、制作、展開、運用を簡便化するために設計されたツールである。   コンテナは、プログラムのパーツ...
What are Linux containers? | Opensource.com
Linuxコンテナとは、ホストしているシステムとは別にアプリケーションを動作させる手法の1つである。コンテナ化することでアプリケーションを必要...
Are Docker containers really secure?
2014年 7月 22日投稿   Daniel J Walsh 画像イメージ:opensource.com (cc-by-sa)  この記事は、私筆者が 今年のDockerConで行ったスピー...
A beginners guide to Docker
2014年 8月 19日 Vincent Batts イメージ画像: opensource.com (cc-by-sa)  これから作ろうとしているアプリが、芸術的に的確な精度を持った...

新着文書

Trump’s Making Good on One of His Many Campaign Promises: Promoting Unfettered Police Power / Amy Goodman & Denis Moynihan
コラム(2017年4月13日付) シリアやイラク、イエメン、北朝鮮などの国々で行われている国家的暴力に世界が注目する中、アメリカにおいても、野放し...
Measuring women's rights online in the Philippines / APC for Foundation for Media Alternatives
フィリピンにおけるオンラインでの女性の権利を測定する APC for Foundation for Media Alternatives 2017年4月11日、フィリピン オンラインでの女...
Pokémon Go is going live / Chris Meadows
もし本を読む以外にスマートフォンで何かしたいと思っているなら、別の選択肢ももうすぐ出てくる。「ザ・バージ」によれば、ポケモンGOがどこのAndroi...

新着Wikipedia翻訳

Cryptocat
Cryptocat -------- 【画像のキャプション】Windows 10でのCryptocat 3.1.24 最初の作成者:Nadim Kobeissi 開発者:Nadim Kobeissiと貢献者たち[...
List of Ambisonic Software
主な出典:Ambisonics ここでは、アンビソニックソフトウェアを紹介する。開発中のものも、終了のものも記載されている。  目次 1 現在も開...
Wrapper function
ラッパー関数 ラッパー関数とは、二次的なサブルーチンの呼び出し[1]や追加のコンピュータ操作をほとんど必要としないシステム・コールを主な目的...

更新履歴

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

    
ブックマーク登録

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

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

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

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


言語選択

    
ファイルプロパティ

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

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


    
ノート

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

言語選択

 →