1. npm run-script build-webpack-dll
2. npm run-script start-webpack-dev-server
3. goto http://localhost:8080

1. babel
   • Configured babel to have proper support for the features we want with ES next.
   • got babel-loader working to translate ES6 code & modules
2. webpack
   • webpack-validator
     • validates webpack.config against a schema
   • html-webpack-plugin
     • auto generates html (can use this to auto generate demo fixtures as well that will encapsulate isolated features of the app)
     • specifying a template to base the generated html that has google font loader and google analytics - proving it's compatible w/ these 3rd party libs.
   • favicons-webpack-plugin
     • handles cross-platform favicon output based on a PNG source
   • cleaning /dist on build
   • building output
     • AMD/ES6 mixed output
     • ES6 only output
   • hot module replacement (HMR) works
   • debugging works w/ source maps enabled however devtool: 'source-map' only works
     • 'eval-source-map' has mixed results w/ AMD modules where nested functions are break pointable but not outer define lvl functions.
   • DLL for vendor files - source maps are included as well so can remote debug.
     • recompile time is less than 500ms now.
   • sass/less to CSS packing
   • svg store plugin works for our use case
   • got css/js min and source map working for prod/dev env
3. AMD compatibility
   1. for application code
      1. loaded in AMD module
      2. loaded in AMD module from ES6 module
      3. loaded in ES6 module from AMD module
   2. for vendor code (no shim - e.g. moment.js)
      1. loaded in AMD module from es6 module
      2. loaded in AMD module from AMD module
4. Testing
   1. Using mocha to run tests (for bamboo and CI tool)
      1. limitations
         1. can debug through IDE with mocha config, but startup is slow. Can't enable watch with this config
         2. ONLY pass in *.spec.jsx or *.spec.js files b/c requiring in files that mix in AMD module formats are not supported. We would need webpack to create chunks for this.
            1. As a side effect, in the .spec files, you can not import files that use non ES6 module formats.
      2. Enhanced with babel-plugin-webpack-alias to be able to use alias'd paths in test specs from webpack.config.js
         1. using cross-env to support passing the NODE_ENV variable to .babelrc
      3. mocha.opts
         1. --require jsdom-global/register to support headless browser support. It adds in global vars that is expected of a browser environment.
         2. --compilers js:babel-core/register to support transpiling .jsx & .js files with babel (https://babeljs.io/docs/usage/require/)
   2. Using karma
      1. there might be a way to not use karma and only use webpack and mocha where mocha points to the bundled assets that webpack outputs and the webpack dev server will continue to output with hot reloads
      2. But for now, we're using karma as the middle man.
      3. debugging sort of seems to work.
      4. how to get it running
         1. start dev server
         2. start karma
         3. start js debugger in webstorm that points to the url that karma is at
      5. not an ideal setup and will need to be changed, but has fast feedback loop at least b/c of HMR.
      6. should look into http://www.ersinakinci.com/how-do-karma-webpack-and-karma-webpack-interact/ to figure out details of karma and webpack
      7. could not figure out how to get jsdom launcher to work, even when including jsdom-global or a custom browser.js. if we can get this in then, we could use this setup for bamboo/CI tool
      8. introduced write-file-webpack-plugin to help facilitate loading in test bundles, but not sure if we need. it's outputting a bunch of patch.json files into dist which is annoying
5. 3rd party vendor libs
   1. loaded 3rd party vendor code that doesn't need to be shimmed via npm/package.json config
   2. needed to use ProvidePlugin to add jQuery, $ and window.jQuery to global scope
   3. still keeping local copy of kendo until they figure out how to use a private NPM for distro
   4. loaded in 3rd party CSS as DLL
6. Existing app compatibility
   1. using underscore-template-loader instead of tpl!
   2. using json-loader instead of text!
   3. using raw-loader to load tpl-hash based TPLs
7. Breaking changes
   1. need to change TPL require syntax
   2. need to change tpl-hash based TPLs to .tpx extension
   3. need to change json imports to use json-loader
   4. Need to set /src as resource root for ctrl+click in IDE to work

Todo

1. directory structure
   1. http://jaysoo.ca/2016/02/28/organizing-redux-application/
   2. put css alongside components in same directory?
   3. keep styles inline, but have global styles
2. dev environment setup
   1. get tests running
3. prod env setup
   1. get tests running
   2. figure out hwo to exclude so bamboo deploy can provide conf.json
4. app compatibility changes
   1. update paths for vendor css and image assets
5. testing
   1. babel-register and react-addons-test-utils was added to devDeps due to temp solution to just get JS test working in node might swap this out for karma or some other method.

• babel-cli contains babel and the cli
• babel-core contains the Node API and require hook
• babel-runtime namespaces the ES2015 features instead of adding to global scope
• babel-polyfill when required/imported adds ES2015 API to global scope
  • babel-node command includes babel-polyfill automatically
  • probably won't need to use babel-polyfill. babel-runtime should be used since there is transpile step anyways.

• dev responsibilities
  • pack all resources/assets into JS
    • pack css
    • pack imgs
    • pack svgs
    • pack js
    • pack/inline SVG as text and inject into body during bootup
  • eslint (https://www.npmjs.com/package/eslint_d)
• prod responsibilities (in addition to dev responsibilites)
  • dedupe plugin
  • minify js
  • minify css
  • js source maps
  • css source maps
  • create seperate bundles (vendor.js vs. app.js)
  • extract CSS outside of the pack
    • extract text plugin
    • can get flash of unstyled content otherwise
    • html-webpack-plugin will auto detect and inject the CSS styles
• it is recommended using path.join for cross-platform to deal with all the path stuff.
• process.env.npm_lifecycle_event is the key under 'scripts' for package.json

• Approach 1: replace require.js with webpack entirely
  • replace all require's and all require.js responsiblity to webpack
• require to webpack: https://gist.github.com/xjamundx/b1c800e9282e16a6a18e

• preact
• react-lite

• can be useful for using 3rd party vendor css (e.g. bootstrap) where you don't use all their styles

• https://medium.com/javascript-scene/3-different-kinds-of-prototypal-inheritance-es6-edition-32d777fa16c9#.78gxnndv6

• webpack loaders for svgs
  • svg-react: Load SVG files as JSX-ified React.createClass declarations.
  • svg-url: Loads SVG file as utf-8 encoded data:URI string.
  • svg-as-symbol: Wraps content of root element of source SVG file inside symbol element and returns resulting markup.
  • svg-sprite: Like style-loader but for SVG: it creates a single SVG sprite from a set of images, appends it to DOM and returns relative symbol url to be used with svg’s .
  • line-art: Inlines SVG files, converting all of its nodes to paths. Useful for line art animations in React components.

• https://www.npmjs.com/package/webpack-webstorm-debugger-script
• ./node_modules/webpack/bin/webpack.js --profile --json > stats.json
• http://webpack.github.io/analyse/
• http://jonathancreamer.com/advanced-webpack-part-1-the-commonschunk-plugin/
• http://jonathancreamer.com/advanced-webpack-part-2-code-splitting/

• https://github.com/CodingZeal/react-boilerplate
• http://randycoulman.com/blog/2016/04/05/more-on-testing-with-mocha-and-webpack/
  • maybe just use karma instead afterall?

https://semaphoreci.com/community/tutorials/testing-react-components-with-enzyme-and-mocha https://github.com/lelandrichardson/enzyme-example-mocha/blob/master/package.json

http://nicolasgallagher.com/how-to-test-react-components-karma-webpack/