前の関連記事：linuxBean14.04(119)NetBeans8.1でNode.jsの設定：もう一つの方法
NetBeans Connector Plugin for Chromeのインストールとチュートリアル
Chromiumのメニューボタンから、その他のツール→拡張機能、他の拡張機能を見る。
「NetBeans Connector」で検索してでてきたNetBeans Connectorをインストールしました。
GeertjanWielenga/Countries: A Knockout example that populates a DataList.
このGitHubリポジトリをクローンします。
これはKnockout.jsの例になっています。
Clone or downloadボタンをクリックしてCopy to clipboardボタンをクリックしてリポジトリのURLをコピーします。
NetBeans8.1のメニュー、チーム→Git→クローン。
リポジトリURL欄にCrtl+Vでペーストします。
クローン先は自動的に入力されました。
「次>」「次>」「終了」をクリックしていくとクローンされます。
プロジェクトを開いてみるとソースフォルダにGitHubリポジトリの内容がコピーされていることがわかります。
サイト・ルート、重要なファイル、BowerライブラリはNetBeansが分類したものです。
プロジェクトフォルダのCountriesを右クリック→プロパティ。
ソース・フォルダと単体テスト・フォルダは自動的に入力されなかったので参照ボタンをクリックしてそれぞれ手動で指定します。
プロジェクトの構成が少し変化しました。
public_htmlファルダがサイト・ルート/ソース、になりtestフォルダが単体テスト、に分類され、重複した表示がなくなりました。
bower.json記載のパッケージを.bowerrc記載のディレクトリにインストール
パッケージマネージャBowerを使ってbower.json記載のパッケージを.bowerrc記載のディレクトリにインストールします。
{
"directory": "public_html/bower_components"
}
.bowerrcにはこう書いてあるので今回のプロジェクトの場合はサイト・ルート/ソース フォルダ下のbower_componentsフォルダにパッケージがインストールされます。プロジェクト名を右クリック、Bowerインストール。
NetBeans8.1のオプションのHTML/JSの設定がちゃんとされていればbower.jsonに書いてある依存パッケージがインストールされるはずです。
"/usr/local/bin/bower" "install" bower invalid-meta The "name" is recommended to be lowercase, can contain digits, dots, dashes bower knockout#3.3.0 not-cached https://github.com/SteveSanderson/knockout.git#3.3.0 bower knockout#3.3.0 resolve https://github.com/SteveSanderson/knockout.git#3.3.0 bower knockout#3.3.0 checkout v3.3.0 bower knockout#3.3.0 resolved https://github.com/SteveSanderson/knockout.git#3.3.0 bower knockout#3.3.0 install knockout#3.3.0 knockout#3.3.0 public_html/bower_components/knockout 完了。最初の警告はbower.jsonのパッケージ名Countriesに大文字が使われているのが原因です。
knockoutパッケージがインストールされました。
あとはNew Features in NetBeans Connector Plugin for Chrome - YouTubeのビデオに沿って行けば結構いろいろ便利な機能があることがわかります。
エディタの中のリンクはCtrlキーを押すと飛べました。
参考にしたサイト
New Features in NetBeans Connector Plugin for Chrome - YouTube
NetBeansとChromeの連携のビデオチュートリアル。
package managers - Bower update return me invalid-meta The "name" is recommended to be lowercase, can contain digits, dots, dashes - Stack Overflow
上記のビデオチュートリアルの題材のGitHubリポジトリ。
ドキュメント | Knockout.js 日本語ドキュメント
ビデオチュートリアルの題材で使われているライブラリ。
npm とフロントエンドのパッケージ管理の未来 ::ハブろぐ
npmとbowerの違いについての解説。
パッケージマネージャー「Bower」が大変便利で捗りそうです - Mach3.laBlog
bowerの使い方の解説。
0 件のコメント:
コメントを投稿