PhoneGap/CordovaとWebpackで作るハイブリッドアプリ開発環境

Transcript

1. PhoneGap/Cordova ͱ Webpack Ͱ࡞Δ ϋΠϒϦουΞϓϦ։ൃ؀ڥ Զͷ࿩Λฉ͚ʂʂLTେձ #1
 2017/03/15
2. ࣗݾ঺հ • ৽෱ ٓါ ʢShinpuku Noriyukiʣ • גࣜձࣾϕʔλιϑτ ΤϯδχΞ • झຯɾಛٕɿϓϩάϥϛϯά
 https://github.com/puku0x
3. ։ൃதͷϓϩμΫτ
4. എܠ • PhoneGapͰΞϓϦ࡞͖ͬͯͨ • ͦΖͦΖ৽͍ٕ͠ज़Λಋೖ͍ͨ͠ • ES2015, TypeScript, PostCSS, …
5. ࣗ෼Ͱ࡞Ζ͏ τϥϯεύΠϥ
   #BCFMͱ͔1PTU$44 1IPOF(BQ ES5/CSS3 ʹม׵ ES2015, SassͳͲ
6. Α͠ʂnpmͱGulpͱ…
7. πʔϧଟ͗͢ʂ
8. Webpack
9. Webpack 2.x • ґଘؔ܎ղܾͱม׵ˍ݁߹
10. ߏ੒ • npm + Webpack + PhoneGap /src /www ES5/CSS3 ʹม׵
11. Webpackઃఆ
12. ೖग़ྗઃఆ 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
    ΁
13. ϩʔμઃఆʢES2015ʣ const webpack = require('webpack'); module.exports = (env) => { return { : module: { rules: [{ test: /\.js$/, exclude: /(node_modules|bower_components)/, use: ['babel-loader'] }] } }; }; Yܥ͸zVTFz
 MPBEFS͸লུෆՄ
14. Babelઃఆ { "presets": [ [ “es2015", {"modules": false} ] ], "plugins": [ "angularjs-annotate" ] } YܥͰ"OHVMBS+4
 Λ࢖͏ͱ͖༻
15. ࣮ߦεΫϦϓτ "scripts": { "build": "webpack" } $ npm run build $ phonegap serve
16. Sass/SCSS࢖͍͍ͨʂ
17. ϩʔμઃఆʢPostCSSʣ const webpack = require('webpack'); module.exports = (env) => { return { : module: { rules: [{ test: /\.(css|scss)$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }] } }; };
18. PostCSSઃఆ module.exports = { plugins: [ require('postcss-import'), require('postcss-url'), require('postcss-cssnext'), require('postcss-nested'), require('postcss-mixins'), require(‘postcss-simple-vars') ] }
19. Ϗϧυ $ npm run build $ phonegap serve …͍΍ɺͪΐͬͱ଴ͯʂ
20. ϑΝΠϧ؂ࢹ "scripts": { "webpack": "webpack —-watch", "serve": "phonegap serve", "start": "npm run webpack & npm run serve" } $ npm start Windows؀ڥͰ͸concurrently͕ඞཁ͔΋
21. ׬੒ʂ /src /www Ϗϧυ มߋݕ஌ มߋݕ஌ σϓϩΠ ES2015, Sass ES5, CSS3 https://github.com/puku0x/angularjs-onsenui2-webpack2
22. ·ͱΊ • WebpackΛ࢖͓͏ • ΋ͬͱ͍͍ํ๏͕͋Ε͹ੋඇʂ