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
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
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
180
PipeCDのプラグイン化で目指すところ
warashi
1
280
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
130
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
110
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
560
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
520
Featured
See All Featured
Making Projects Easy
brettharned
116
6.3k
Agile that works and the tools we love
rasmusluckow
329
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Rails Girls Zürich Keynote
gr2m
95
14k
Into the Great Unknown - MozCon
thekraken
40
1.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Navigating Team Friction
lara
187
15k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Visualization
eitanlees
146
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
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Λ͓͏ • ͬͱ͍͍ํ๏͕͋Εੋඇʂ