Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PhoneGap/CordovaとWebpackで作るハイブリッドアプリ開発環境
Search
puku0x
March 15, 2017
Programming
0
790
PhoneGap/CordovaとWebpackで作るハイブリッドアプリ開発環境
puku0x
March 15, 2017
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
210
ファインディでのGitHub Actions活用事例
puku0x
9
3.3k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
430
Findyの開発生産性を上げるためにやったこと
puku0x
1
590
Angularコーディングスタイルガイドはいいぞ
puku0x
1
330
Nx CloudでCIを爆速にした話
puku0x
0
850
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
850
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.8k
Other Decks in Programming
See All in Programming
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
240
5つのアンチパターンから学ぶLT設計
narihara
1
130
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
400
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
1k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
380
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.7k
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
110
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
320
Deep Dive into ~/.claude/projects
hiragram
10
2k
PipeCDのプラグイン化で目指すところ
warashi
1
180
Featured
See All Featured
Docker and Python
trallard
44
3.4k
Building Applications with DynamoDB
mza
95
6.5k
Producing Creativity
orderedlist
PRO
346
40k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
A designer walks into a library…
pauljervisheath
207
24k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
A Tale of Four Properties
chriscoyier
160
23k
Transcript
PhoneGap/Cordova ͱ Webpack Ͱ࡞Δ ϋΠϒϦουΞϓϦ։ൃڥ ԶͷΛฉ͚ʂʂLTେձ #1 2017/03/15
ࣗݾհ • ৽ ٓါ ʢShinpuku Noriyukiʣ • גࣜձࣾϕʔλιϑτ ΤϯδχΞ •
झຯɾಛٕɿϓϩάϥϛϯά https://github.com/puku0x
։ൃதͷϓϩμΫτ
എܠ • PhoneGapͰΞϓϦ࡞͖ͬͯͨ • ͦΖͦΖ৽͍ٕ͠ज़Λಋೖ͍ͨ͠ • ES2015, TypeScript, PostCSS, …
ࣗͰ࡞Ζ͏ τϥϯεύΠϥ #BCFMͱ͔1PTU$44 1IPOF(BQ ES5/CSS3 ʹม ES2015, SassͳͲ
Α͠ʂnpmͱGulpͱ…
πʔϧଟ͗͢ʂ
Webpack
Webpack 2.x • ґଘؔղܾͱมˍ݁߹
ߏ • npm + Webpack + PhoneGap /src /www ES5/CSS3
ʹม
Webpackઃఆ
ೖग़ྗઃఆ const webpack = require('webpack'); module.exports = (env) => {
return { entry: { app: __dirname + '/src/js/app.js' }, output: { path: __dirname + '/www/assets', filename: '[name].bundle.js', }, }}; TSD͔Β XXXBTTFUT
ϩʔμઃఆʢES2015ʣ const webpack = require('webpack'); module.exports = (env) => {
return { : module: { rules: [{ test: /\.js$/, exclude: /(node_modules|bower_components)/, use: ['babel-loader'] }] } }; }; YܥzVTFz MPBEFSলུෆՄ
Babelઃఆ { "presets": [ [ “es2015", {"modules": false} ] ],
"plugins": [ "angularjs-annotate" ] } YܥͰ"OHVMBS+4 Λ͏ͱ͖༻
࣮ߦεΫϦϓτ "scripts": { "build": "webpack" } $ npm run build
$ phonegap serve
Sass/SCSS͍͍ͨʂ
ϩʔμઃఆʢPostCSSʣ const webpack = require('webpack'); module.exports = (env) => {
return { : module: { rules: [{ test: /\.(css|scss)$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }] } }; };
PostCSSઃఆ module.exports = { plugins: [ require('postcss-import'), require('postcss-url'), require('postcss-cssnext'), require('postcss-nested'),
require('postcss-mixins'), require(‘postcss-simple-vars') ] }
Ϗϧυ $ npm run build $ phonegap serve …͍ɺͪΐͬͱͯʂ
ϑΝΠϧࢹ "scripts": { "webpack": "webpack —-watch", "serve": "phonegap serve", "start":
"npm run webpack & npm run serve" } $ npm start WindowsڥͰconcurrently͕ඞཁ͔
ʂ /src /www Ϗϧυ มߋݕ มߋݕ σϓϩΠ ES2015, Sass ES5,
CSS3 https://github.com/puku0x/angularjs-onsenui2-webpack2
·ͱΊ • WebpackΛ͓͏ • ͬͱ͍͍ํ๏͕͋Εੋඇʂ