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
770
PhoneGap/CordovaとWebpackで作るハイブリッドアプリ開発環境
puku0x
March 15, 2017
Tweet
Share
More Decks by puku0x
See All by puku0x
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
340
Findyの開発生産性を上げるためにやったこと
puku0x
1
430
Angularコーディングスタイルガイドはいいぞ
puku0x
1
140
Nx CloudでCIを爆速にした話
puku0x
0
510
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.5k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
700
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
1.8k
Nxはいいぞ
puku0x
0
640
Angularの静的サイトジェネレーター「Scully」の最新情報
puku0x
0
250
Other Decks in Programming
See All in Programming
Folding Cheat Sheet #2
philipschwarz
PRO
0
110
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
1.1k
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
630
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
280
プールにゆこう
irof
2
120
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
340
Doctrine ORMでValue Objectを扱う方法4選 #phpstudy / 4 ways to handle Value Objects with Doctrine ORM
77web
4
110
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
480
受託開発でGitLab CI を活用していく
xiombatsg
1
270
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
250
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
220
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
170
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
4 Signs Your Business is Dying
shpigford
175
21k
Ruby is Unlike a Banana
tanoku
96
10k
Design by the Numbers
sachag
274
18k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
The Cost Of JavaScript in 2023
addyosmani
14
3.8k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
119
38k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
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Λ͓͏ • ͬͱ͍͍ํ๏͕͋Εੋඇʂ