cordovaプロジェクトにjQueryを放り込む方法

時代はcordovaである!
時の権力者はそう言ったか、言わなかったらしい。
結局のところ権力者は誰かって話になる。
そう、権力者はいない。人はそれぞれ自分の人生の権力者であるとかうだうだ…

そんな感じで、今日のテーマはcordovaプロジェクトでjQueryを入れる方法を説明する。

始めにcordovaのバージョンを紹介する。
と言うのも変わったら絶対変わる

$ cordova -v
6.4.0

はい、6.4.0である。

んで、jQueryを組み込むってシンプルな話…

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

で、十分じゃ?
と思うかもしれない。
しかし、ネットアクセスができない場合をcordovaの場合は考える必要がある。
そして、負けた気がする。
実際に、pluginとして、cordova-jqueryが準備されている。
cordova-jquery : https://www.npmjs.com/package/cordova-jquery

さっそく、ぶっ込む…

$ cordova plugin add cordova-jquery
Fetching plugin "cordova-jquery" via npm
Error: Cannot find plugin.xml for plugin "package". Please try adding it again.

ん?Fetchin pluginが通って…
plugin.xmlがない?packageに?
ってかpackageって何?w
plugin.xmlって?
たぶん古い内容なんかな?
cordova-jquery@0.1.6

… メモ:記事書きながら調査したら入った

とりあえずnpmで取得できるのでゲットする…
プロジェクト内で、cordova-pluginを取得

$ npm install cordova-jquery
...

WARNが数件でましたが、入りました。
実行直下にnode_modulesディレクトリが作成されます。
cordova-jqueryディレクトリがあるのでこれでOK
次にプロジェクトにcordova-jqueryを実行します

$ node node_modules/cordova-jquery/cordova-jquery
? Would you like to add jQuery mobile to the current Apache Cordova project? Yes
? What would you like to do now that jQuery is enabled? (Use arrow keys)
❯ applyTemplate 
  insertElement 
  exit 

はい、質問が来ますね。
テンプレートを適応?エレメントをぶち込む?
これで希望を言いましょう

applyTemplateを選ぶと、ひな形を聞かれます。

❯ multiPage 
  headerNavbar 
  persistentNavbar 
  externalPanel 
  accordion 
  listView 
  exit 

とま、どちらか選ぶと無事に入ります。

疑り深い人はコマンドを実行してください。

$ ls www/js/
index.js			jquery-1.5.0.mobile.min.css
jquery-1.11.1.min.js		jquery-1.5.0.mobile.min.js

$ grep jquery www/index.html 
		

入りましたね。v

とま、こんな感じで入れることが可能になりました。
そして、問題なのがnode_modulesです…
14MBもあるのでそのままではダサい(GitHubぶっ込むのは)

ディレクトリ消して完了!
っと、これで平和になったな。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です