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
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.2k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
220
ファインディでのGitHub Actions活用事例
puku0x
9
3.4k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
430
Findyの開発生産性を上げるためにやったこと
puku0x
1
600
Angularコーディングスタイルガイドはいいぞ
puku0x
1
350
Nx CloudでCIを爆速にした話
puku0x
0
870
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
870
Other Decks in Programming
See All in Programming
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
180
Ruby Parser progress report 2025
yui_knk
1
140
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
740
兎に角、コードレビュー
mitohato14
0
150
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
270
Claude Codeで挑むOSSコントリビュート
eycjur
0
180
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
340
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
2
1.5k
CSC305 Summer Lecture 05
javiergs
PRO
0
110
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
Understanding Ruby Grammar Through Conflicts
yui_knk
1
140
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
695
190k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
YesSQL, Process and Tooling at Scale
rocio
173
14k
How to Ace a Technical Interview
jacobian
279
23k
A designer walks into a library…
pauljervisheath
207
24k
Agile that works and the tools we love
rasmusluckow
329
21k
Optimizing for Happiness
mojombo
379
70k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
900
Making Projects Easy
brettharned
117
6.3k
For a Future-Friendly Web
brad_frost
179
9.9k
The Pragmatic Product Professional
lauravandoore
36
6.8k
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Λ͓͏ • ͬͱ͍͍ํ๏͕͋Εੋඇʂ