Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React.jsでプロダクション環境を見据える

 React.jsでプロダクション環境を見据える

React.js始めるにあたり、webpack調べて色々触ったので共有です。

Junya Nakazato

February 20, 2017
Tweet

More Decks by Junya Nakazato

Other Decks in Technology

Transcript

  1. ࣗݾ঺հ • גࣜձࣾγʔΤʔΞυόϯε • ϑϩϯτΤϯυ/όοΫΤϯυ։ൃ • ஥ཬ ३໼ • ؍ଌର৅

    • Rails, React.js, Material UI, Docker, Chef, ServerSpec, Amazon ECS, CircleCI 2.0, Neovim 2
  2. { "name": "Junya Nakazato", "job": "Front-End and Back-End Web Developer",

    "live": "Okinawa, Japan", "frontend": [ "JavaScript", "React", "Material-UI", "Grommet" ], "backend": [ "Node", "Ruby", "Java", "PHP", "Rails", "Spring Framework", "FuelPHP" ], "infrastructure": [ "AWS", "ECS", "CloudFront", "Docker", "Chef" ], "ops": [ "CircleCI", "NewRelic", "Datadog", "Sentry" ], "tools": [ "Mac", "Neovim", "zsh", "Vimperator", "XCode" ], "game": [ "League of Legends", "GUILTY GEAR XX ΛCORE" ], } 3
  3. 9

  4. 12

  5. ࢖͍ํ webpackୟ͘લʹɺpackage.jsonܦ༝ͰNODE_ENVΛ౉͢ // package.json scripts: { build: "NODE_ENV=production webpack --progress

    --colors", start: "webpack-dev-server --history-api-fallback --hot --inline --progress --colors", }, 14
  6. NODE_ENVผʹconfigੜ੒ͯ͠Ϛʔδ // webpack.config.babel.js import merge from 'webpack-merge'; // NODE_ENVͰ෼ذ const

    config = process.env.NODE_ENV === 'production' ? require('./webpack.config.prod.babel.js') : require('./webpack.config.dev.babel.js'); const common = { context: __dirname, entry: './src/index.jsx', output: { filename: 'bundle.js' }, }; // ڞ௨ΦϒδΣΫτͱ֤configΛmerge module.exports = merge(common, config); 15
  7. ࢖͍ํ // webpack.config.babel.js import webpack from 'webpack'; module.exports = {

    plugins: [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, comments: false, }), new webpack.LoaderOptionsPlugin({ minimize: true }), // webpack2.X͔Β༗ޮ new webpack.optimize.AggressiveMergingPlugin(), ], }; 17
  8. entryͷΩʔΛݩʹϑΝΠϧ໊͕ੜ੒͞ΕΔ module.exports = { entry: { bundle: './src/index.jsx' }, output:

    { - filename: 'bundle.js', + filename: '[name].[chunkhash].js', }, plugins: [ + new ManifestPlugin(), + new ChunkManifestPlugin({ + filename: 'chunk-manifest.json', + manifestVariable: 'webpackManifest', + })] 19
  9. html-webpack-pluginͱ૊Έ߹ΘͤΕ͹… <!-- src/index.html --> <!DOCTYPE html> <html> <head> <meta http-equiv="content-type"

    content="text/html; charset=utf-8"> <title>title</title> </head> <body> <div id="root"></div> <script type="text/javascript" src="/bundle.b00a9f3a29b791781cc5.js"></script> </body> </html> 20
  10. react-router͔ͬͯɺRouterίϯϙʔωϯτʹಥͬࠐΊ͹OK // src/index.jsx import React from 'react'; import ReactDOM from

    'react-dom'; import ReactGA from 'react-ga'; import { Router, Route, IndexRoute, browserHistory } from 'react-router'; import App from '../containers/App'; window.React = React; ReactGA.initialize('UA-123456-7'); const logPageView = () => { ReactGA.set({ page: window.location.pathname }); ReactGA.pageview(window.location.pathname); }; ReactDOM.render(( <Router history={browserHistory} onUpdate={logPageView}> <Route path="/"> <IndexRoute component={App} /> <Route path="/:userName" component={App} /> </Route> </Router> ), document.getElementById('root')); 22
  11. ௕͍ͷͰ͍Ζ͍Ζলུ import ReactGA from 'react-ga'; window.React = React; ReactGA.initialize('UA-123456-7'); const

    logPageView = () => { ReactGA.set({ page: window.location.pathname }); ReactGA.pageview(window.location.pathname); }; ReactDOM.render(( <Router history={browserHistory} onUpdate={logPageView} /> )) 23