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
800
PhoneGap/CordovaとWebpackで作るハイブリッドアプリ開発環境
puku0x
March 15, 2017
Tweet
Share
More Decks by puku0x
See All by puku0x
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
550
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.2k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
230
ファインディでのGitHub Actions活用事例
puku0x
9
3.4k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
430
Findyの開発生産性を上げるためにやったこと
puku0x
1
610
Angularコーディングスタイルガイドはいいぞ
puku0x
1
360
Nx CloudでCIを爆速にした話
puku0x
0
880
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
Other Decks in Programming
See All in Programming
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
2.8k
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
350
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
180
rage against annotate_predecessor
junk0612
0
170
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
120
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
Design Foundational Data Engineering Observability
sucitw
3
210
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
Testing Trophyは叫ばない
toms74209200
0
890
速いWebフレームワークを作る
yusukebe
5
1.7k
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Speed Design
sergeychernyshev
32
1.1k
Designing for humans not robots
tammielis
253
25k
Being A Developer After 40
akosma
90
590k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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Λ͓͏ • ͬͱ͍͍ํ๏͕͋Εੋඇʂ