kentcdodds / es6-todomvc Goto Github PK

View Code? Open in Web Editor NEW

352.0 16.0 358.0 1.21 MB

The vanillajs example converted to es6

Home Page: https://kcd.im/webpack-workshop-repo

License: MIT License

HTML 5.92% JavaScript 93.11% CSS 0.97%

kcd-edu kcd-archive

es6-todomvc's Introduction

Webpack Workshop

Using the Vanilla JavaScript TodoMVC Example

Purpose

This was originally part of an ES6 training by Kent C. Dodds

Now I'm using it to teach people about Webpack:

Thanks

This codebase was originally taken from the TodoMVC project starting here. Big thanks to them!

Latest Workshop

This repo has been used to teach in several different places (egghead, Frontend Masters, etc.). If you're coming here to follow along with that, then I recommend you follow the project setup for that (see below). The most recent and up-to-date version of the workshop is the Frontend Masters workshop. This is a linear workshop and starts with the FEM/00-original-project branch. See the slides.

Project Setup

This project assumes you have NodeJS v6 or greater installed. You should also have npm v3 or greater installed as well (this comes packaged with Node 6). You'll also need a recent version of git installed as well.

You may have come to this project from different varying sources. There are a different series of branches for each workshop/course I've done. To get started with the project, start with this:

Sign up for a GitHub Account (if you don't already have one)
Fork this repo
Clone your fork
In the directory you cloned the repository, run git fetch --all

If you need help with these steps, you might check out this free Egghead.io course which can help you get things going.

Finally, based on which version of the project you're looking for (workshop, egghead, or Frontend Masters) you'll run one of the following commands in the cloned directory:

ES6 Workshop: npm run setup:workshop
Egghead Course: npm run setup:egghead
Frontend Masters Workshop: npm run setup:fem

If you get any failures at this point something is wrong and needs to be fixed. Remember, Google and StackOverflow are your friends.

You might find it helpful to see a list of the available branches. Run: git branch for that.

Notes

Because Webpack 2 is currently in beta, there are issues with peerDependencies, so you’ll have to use npm version 3 to be able to install the dependencies.

Running Webpack with webpack -p is not showing the warnings about the dead code elimination anymore. However, it is working as expected.

Updates

The ecosystem moves fast. So this section of the README will be dedicated to tracking changes in the ecosystem so you can follow the repo, but be aware of changes in the latest versions of the dependencies you'll be installing (or if there are better dependencies to use now).

All courses
- babel-preset-es2015-webpack is no longer necessary for leveraging tree shaking. You can now just use babel-preset-es2015 with a special configuration to indicate modules should not be transformed. More info
Egghead Course
- Using istanbul is no longer necessary for checking code coverage and can actually be accomplished using special configuration in karma.conf.js with the karma-coverage plugin like this.

Contributing

Super nice that you're interested in contributing. Unfortunately things are pretty complex with how things are set up with branches for each section of the workshop. So feel free to file pull requests to indicate what needs to be changed but if I decide to implement a change in the workshop code, I'll probably just have to manually make the updates. Thanks!

Windows 10 Setup Instructions

Fork and clone this repository
Download Git Bash
Follow the instructions on this page to clone all branches at once in Git Bash: https://stackoverflow.com/questions/40310932/git-hub-clone-all-branches-at-once
In Git Bash: run cd es6-todomvc
Run npm run setup:fem (this will fail, but there is a workaround)
After that fails:

In Git Bash run git stash
run git checkout FEM/00-original-project --force
Make sure http-server is installed globally: npm i -g http-server
run http-server --silent -c-1 -p 3084 (or whatever port number you want to use). If the port number you are trying to use is already in use, it will give you a nasty error that says something like: Error: listen EADDRINUSE 0.0.0.0:8081
Open http://localhost:3084/ or change the URL to indicate the port number you wish to use
In your package.json file, add -p 3084 to the end of your "start" script
Add open http://localhost:3084/ && to the beginning of your start script (make sure there is a space between && and http-server
now you can just run npm start and the app should load up at http://localhost:3084

LICENSE

MIT

es6-todomvc's People

Contributors

Stargazers

Watchers

Forkers

marcelaraujo jimthedev creedarky tim-giblin hanss thelarkinn dtd-design-team sachingill ckatzorke michaeltrang kolesnik andrejskoda zhentian-wan skywinston nireak phra mjgs bignom kickwherecollab lukephills corderophilosophy nipr-ejohnson1 mariopolo2805 raparlasiva hans-hsr zacjones93 nathania ajaxpf mixed 0b3r micopc emarinizquierdo gorioli gibbage alelau royquilor pidg3 workingknights robertpenner jonboylailam wesaspinall jmreidy m66n jamiegiftbit bhuber2010 enkindle vlayanto-at-dev inaki mikeyao turtec jnis77diver radcliffe danieltunon djole27 horacioh brianrip martensonbj bradleygore pdewouters teresayung cdoremus mgott vandosant jbusch kishorenekkalapudi christian-acuna elliotschi claudiordgz garmjs jasonmorita mihirsoni krishnamurthypradeep bernicechua fipo gp3gp3gp3 itsmed conrad777 mishastahiv rafalszemraj niketsourabh jennyluciav furqan dhnguyen09 lpasslack faiyazz mosse fegg nishanthpavan olgagr yyvanyang dcuevas rtoledo1105 tony-gutierrez lmdragun nddejong sammershon tongslee jhdoak lomeshpatel airbr

es6-todomvc's Issues

$on() Does not allow options param

Hi Kent,
Thanks for the awesome course! Helped me a lot moving from Gulp.
Just noticed $on(elem, type, cb, { once: true }) would not work as expected.

Future proof version 👍

/**
 * Wrapper for `addEventListener`
 *
 * @param {HTMLElement} target
 * @param {string} eventType
 * @param {function} eventHandler
 * @param {boolean|Object.<boolean>} options - useCapture OR
 * {capture, once, passive}
 */
function $on(target, eventType, eventHandler, opt = false) {
  target.addEventListener(eventType, eventHandler, opt);
}

Bug: changing filter results in new `Todo` object being created, duplicating all state, resulting in incorrect render state

Steps to reproduce:

Add a todo item
Go to "Completed" filter
Reload the page
Select "All"
Mark item as completed.
Observe bug: It won't show up anymore, even though we are in All.

Turns out, that is because we now have two Todo instances (one for each filter), and the one created for the Completed filter takes presedence. Meaning we see Completed (rather than All) Todos.

What to do?

The bug comes from the fact that onLoad is called when switching between filters, which in turn calls updateTodo, which in turn creates a new Todo instance each time, and a copy of all state. It also re-registers all event handlers, which will render according to their own state.

Fix: Change src/todo.js, line 27 to todo = todo || new Todo('todos-vanillajs');, so it won't create another Todo instance, if one already exists.

setup:fem: `git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project` npm ERR! Exit status 1

I'm using mac this is what i get when running npm run setup:fem

npm ERR! Darwin 15.5.0
 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "validate"
 npm ERR! node v5.2.0
 npm ERR! npm  v3.5.2
 npm ERR! code ELIFECYCLE
 npm ERR! @ validate: `npm-run-all --parallel lint build test`
 npm ERR! Exit status 1
 npm ERR! 
 npm ERR! Failed at the @ validate script 'npm-run-all --parallel lint build test'.
 npm ERR! Make sure you have the latest version of node.js and npm installed.
 npm ERR! If you do, this is most likely a problem with the  package,
 npm ERR! not with npm itself.
 npm ERR! Tell the author that this fails on your system:
 npm ERR!     npm-run-all --parallel lint build test
 npm ERR! You can get information on how to open an issue for this project with:
 npm ERR!     npm bugs 
 npm ERR! Or if that isn't available, you can get their info via:
 npm ERR!     npm owner ls 
 npm ERR! There is likely additional logging output above.

error with extract-text-webpack

Hi i have this error, after start webpack --env.dev , what can i do with this ?
I would be grateful for help

ERROR in c:\es6-todomvc\node_modules\extract-text-webpack-plugin\loader.js?{"omit":1,"remove":true}!c:\es6-todomvc\node_modules\style-loader\index.js!c:\es6-todomvc\node_modules\css-loader\index.js!c:\es6-todomvc\node_modules\todomvc-app-css\index.css doesn't export content

Error running npm run setup:fem

The errors from npm-debug.log are as follows:

npm-debug.log

11 silly lifecycle @~setup:fem: Args: [ '/d /s /c',
11 silly lifecycle 'git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project' ]
12 silly lifecycle @~setup:fem: Returned: code: 1 signal: null
13 info lifecycle @~setup:fem: Failed to exec setup:fem script
14 verbose stack Error: @ setup:fem: git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (C:\Users\Kent\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:242:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess. (C:\Users\Kent\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:852:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
15 verbose pkgid @
16 verbose cwd C:\Programming\Nodejs\es6-todomvc
17 error Windows_NT 10.0.10586
18 error argv "C:\Program Files\nodejs\node.exe" "C:\Users\Kent\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "setup:fem"
19 error node v6.3.1
20 error npm v3.10.5
21 error code ELIFECYCLE
22 error @ setup:fem: git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project
22 error Exit status 1
23 error Failed at the @ setup:fem script 'git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project
23 error You can get information on how to open an issue for this project with:
23 error npm bugs
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Webpack 2 doesn't satisfy siblings peer dependencies

I did a fresh clone of the repo and ran npm install and and getting peer dependency errors with regard to babel-loader, karma-webpack, and webpack-dev-server.

npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v4.4.0
npm ERR! npm  v2.14.20
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants webpack@1 || ^2.1.0-beta
npm ERR! peerinvalid Peer [email protected] wants webpack@^1.4.0
npm ERR! peerinvalid Peer [email protected] wants webpack@>=2.0.3-beta <3

Running npm 2.14.20 and node 4.4.0.

Egghead setup not working

Hi,

Just forked your repo and tried to get it to work. I added your repo as an upstream remote. I then did a git fetch -all. Then I did npm run setup:egghead. This results in a message saying Exit status 1. I'm on node v6.2.2 and npm 3.9.5. Any thoughts on what could be wrong? This is the output I have in npm-debug.log:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'run',
1 verbose cli   'setup:egghead' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'presetup:egghead', 'setup:egghead', 'postsetup:egghead' ]
5 info lifecycle @~presetup:egghead: @
6 silly lifecycle @~presetup:egghead: no script for presetup:egghead, continuing
7 info lifecycle @~setup:egghead: @
8 verbose lifecycle @~setup:egghead: unsafe-perm in lifecycle true
9 verbose lifecycle @~setup:egghead: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/awesome/Sites/training/egg-webpack-production/node_modules/.bin:/usr/local/bin:/usr/local/bin:/usr/local/opt/php56/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/usr/local/mysql/bin/
10 verbose lifecycle @~setup:egghead: CWD: /Users/awesome/Sites/training/egg-webpack-production
11 silly lifecycle @~setup:egghead: Args: [ '-c',
11 silly lifecycle   'git checkout prelesson/polyfill-promises && npm install && mkdir dist && npm run validate' ]
12 silly lifecycle @~setup:egghead: Returned: code: 1  signal: null
13 info lifecycle @~setup:egghead: Failed to exec setup:egghead script
14 verbose stack Error: @ setup:egghead: `git checkout prelesson/polyfill-promises && npm install && mkdir dist && npm run validate`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:245:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:852:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
15 verbose pkgid @
16 verbose cwd /Users/awesome/Sites/training/egg-webpack-production
17 error Darwin 15.6.0
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "setup:egghead"
19 error node v6.2.2
20 error npm  v3.9.5
21 error code ELIFECYCLE
22 error @ setup:egghead: `git checkout prelesson/polyfill-promises && npm install && mkdir dist && npm run validate`
22 error Exit status 1
23 error Failed at the @ setup:egghead script 'git checkout prelesson/polyfill-promises && npm install && mkdir dist && npm run validate'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the  package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     git checkout prelesson/polyfill-promises && npm install && mkdir dist && npm run validate
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Arrow functions for lexical this

Just briefly looking at some of the code in this repository I see the pattern var that = this; in a lot of places. If I'm not mistaken this can be eliminated with the use of ES6 arrow functions as they support lexical this right? If so, I'd be willing to work on a PR if that is something that would be considered.

One such example: https://github.com/kentcdodds/es6-todomvc/blob/master/src/view.js#L63 that could be made more "ES6"-like

failed to setup

TPHomeMac:starwars-names tphome$ npm run setup:fem

[email protected] setup:fem /Users/tphome/starwars-names
git checkout FEM/10.1-docs && npm install && npm run validate && rimraf .nyc_output coverage dist .git/hooks && git checkout FEM/00-scratch

Branch FEM/10.1-docs set up to track remote branch FEM/10.1-docs from origin.
Switched to a new branch 'FEM/10.1-docs'
(node:1386) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated [email protected]: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: cross-spawn no longer requires a build toolchain, use it instead!
npm WARN deprecated [email protected]: this package has been reintegrated into npm and is now out of date with respect to npm
npm WARN deprecated [email protected]: Please update conventional-changelog to >1.0.0. If you are running the cli, use conventional-changelog-cli

[email protected] install /Users/tphome/starwars-names/node_modules/fsevents
node-pre-gyp install --fallback-to-build

[fsevents] Success: "/Users/tphome/starwars-names/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node" is installed via remote

[email protected] install /Users/tphome/starwars-names/node_modules/execSync
node install.js

[execsync v1.0.2] Attempting to compile native extensions.
[execSync v1.0.2]
Native code compile failed!!

[email protected] install /Users/tphome/starwars-names/node_modules/ghooks
node ./bin/module-install

Config did not export an object error thrown

I have the below webpack.config.js, but keep getting error Config did not export an object when running command npm run webpack --env.dev

Can you point to what I am doing incorrectly? Thanks.

const webpack = require('webpack');

module.exports = env => {
    const addPlugin = (add, plugin) => add ? plugin : undefined;
    const ifProd = plugin => addPlugin(env.prod, plugin);
    const removeEmpty = array => array.filter(i => !!i);

    return {
        entry: getEntrySources(['whatwg-fetch', './src/entry.js']),
        output: {
            path: __dirname + '/.build/js',
            filename: 'bundle.js',
        },
        devtool: 'cheap-module-source-map',
        module: {
            preLoaders: [{
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loaders: [
                    'source-map',
                ],
            },
          ],
            loaders: [{
                test: /\.less$/,
                include: /src/,
                loaders: [
                    'style',
                    'css',
                    'postcss?browsers=last 3 versions',
                    'less',
                ],
            }, {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'url?limit=8192',
                    'img',
                ],
            }, {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loaders: [
                    'react-hot',
                    'babel?presets[]=react,presets[]=es2015',
                    'eslint',
                ],
            }, {
                test: /\.json$/,
                include: /lib|node_modules/,
                loaders: [
                    'json',
                ],
            },
          ],
        },
        plugins: removeEmpty([
            ifProd(new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false,
                    screw_ie8: true,
                },
            })),
        ]),
    };
};

function getEntrySources(sources) {
    return sources;
}

CommonsChunkPlugin needs to specify manifest for LT Caching

In the https://github.com/kentcdodds/es6-todomvc/blob/lesson/hashing-chunks, you demonstrate how to do hashing with chunks. However, from what I understand, you need to specify a manifest with the commons chunk plugin. Otherwise, if you change the application code, the hash for the vendor file will change too even if you make no changes to the vendor file.

This guide explains it better than I can:
http://survivejs.com/webpack/building-with-webpack/splitting-bundles/

All files removed after running npm run setup:fem

What I did:

Installednvm and switched to v6 which was confirmed both by command -v nvm, running nvm install node, and then running nvm ls which showed me that it was running v6
created a new directory inside of my code folder, ran git clone https://github.com/kentcdodds/starwars-names.git
cd into that directory
Then, following the instructions on the email, ran npm run setup:fem

What I expected to happen:

For the package to be installed
That when I went to http://localhost:8080 for a ToDo app to be there

What actually happened:

Console output:

> [email protected] setup:fem /Users/admin/Code/Front End Masters/starwars-names
> git checkout FEM/00-scratch

Branch FEM/00-scratch set up to track remote branch FEM/00-scratch from origin.
Switched to a new branch 'FEM/00-scratch'

running ls inside of the folder now shows nothing while before the npm run setup:fem gave me:

CONTRIBUTING.md         other                   webpack.config.babel.js
LICENSE                 package.json
README.md               src

Dead Code Elimination doesn't work after Tree shaking

I was looking into the Tree shaking with Webpack 2 lesson, and I took into account the "presets": [["es2015", {modules: false}]] change but when I run the npm run build:prod is not doing the dead code elimination. The addClass function is still there. Is it necessary any extra step?

I'm using the lesson/treeshaking branch and Node version 6.10.2.

Cannot remove "babel-plugin-transform-es2015-modules-commonjs" from the plugin list

Two items that may help narrow down the issue:

I previously had older versions of both node and npm on my system.
During the npm dependency resolution stage, I see this warning:

npm WARN [email protected] requires a peer of webpack@^1.4.0 but none was installed.

I do see the webpack creating some bundles:

Hash: b068372baa672e06b4d7
Version: webpack 2.1.0-beta.20
Time: 1907ms
                                      Asset       Size  Chunks             Chunk Names
     bundle.app.f664776ed4d591679617.js.map    2.59 kB    1, 2  [emitted]  app
      bundle.vendor.037e898b2f23ec84c376.js  138 bytes    0, 2  [emitted]  vendor
    bundle.manifest.9eb8de37e396657e9121.js    1.46 kB       2  [emitted]  manifest
     styles.vendor.037e898b2f23ec84c376.css    5.13 kB    0, 2  [emitted]  vendor
  bundle.vendor.037e898b2f23ec84c376.js.map  663 bytes    0, 2  [emitted]  vendor
 styles.vendor.037e898b2f23ec84c376.css.map  115 bytes    0, 2  [emitted]  vendor
         bundle.app.f664776ed4d591679617.js    2.22 kB    1, 2  [emitted]  app
bundle.manifest.9eb8de37e396657e9121.js.map    13.6 kB       2  [emitted]  manifest
                                 index.html     3.5 kB          [emitted]  
                                      sw.js    5.94 kB          [emitted]  
                 appcache/manifest.appcache  228 bytes          [emitted]  
                     appcache/manifest.html   58 bytes          [emitted]  
   [2] multi vendor 28 bytes {0} [built]
    + 5 hidden modules

And directly after that output I receive my first error:

ERROR in ./bootstrap.js
Module build failed: Error: Cannot remove "babel-plugin-transform-es2015-modules-commonjs" from the plugin list.
    at Object.<anonymous> (/Users/slaplante/workspace/frontendmasters/es6-todomvc/node_modules/babel-preset-es2015-webpack/index.js:35:11)

Many (but not all) of the chunks fail:

chunk    {0} vendor, styles.vendor.css (vendor) 69 bytes [entry]
    [0] ./~/todomvc-app-css/index.css 41 bytes {0} [built]
    [2] multi vendor 28 bytes {0}
chunk    {1} app (app) 1.73 kB [entry]
    [1] ./src/bootstrap.js 1.73 kB {1} [built] [failed] [1 error]
chunk    {2} src/view.js (src/view.js) 1.73 kB [entry] [rendered]
   [16] ./src/view.js 1.73 kB {2} [built] [failed] [1 error]
chunk    {3} src/todo.js (src/todo.js) 1.73 kB [entry] [rendered]
   [15] ./src/todo.js 1.73 kB {3} [built] [failed] [1 error]

All of the errors that are reported are the same "Cannot remove...from plugin list" on the same plugin.

Based on gajus/babel-preset-es2015-webpack#10
I tried running

npm uninstall --save-dev babel-preset-es2015

both before and after changing back to the master branch, but the same errors are reported.

N.B. the setup:fem script is found in the master branch but the script changes you to another branch; ipso facto that script cannot be run twice without switching back to master.

Finally, npm itself reports this to me:

npm ERR! Failed at the @ build script 'webpack --env.prod -p'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack --env.prod -p

as well as

npm ERR! Tell the author that this fails on your system:
npm ERR!     npm-run-all --parallel lint build test

as well as

npm ERR! Tell the author that this fails on your system:
npm ERR!     git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project

Module not found

localhost - Site cannot be reached

I am seeing these issues:
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]

Also another error at the end of the log file below when I tried to run npm start.
I am running Windows 10, 64bit.
node v6.3.1
npm v3.10.3
git v2.9.2
npm_log.txt

Destructuring in webpack config throws error

What happens

After cloning the workshop repo and checking out the workshop/07-coverage branch, running npm run setup exits with an error before testing and coverage completes.

I was still able to subsequently checkout the workshop/00-original-project branch and run npm start with no problems. However, any branch after that (as soon as webpack is introduced) will error on both npm start and npm run validate.

Why it happens

The test script (as part of the validate script) is throwing an error as a result of destructuring in the webpack configuration. As far as I know (read: as far as node.green knows), Node doesn't support the destructuring unless you're using v6.x -- I'm running v4.4.1 (this is the problem).

Why I'm even bringing it up

I just thought I'd let you know, since a specific Node version wasn't in the prep instructions for the workshop -- and in the off-chance that you do consider this an issue, and want to modify the configuration file or the instructions for future workshops.

Quick fix for Node v4.x

Getting things to run as expected, without changing to v6.x:

// webpack.config.js

const {resolve} = require('path')
// becomes...
const resolve = require('path').resolve

Looking forward to the workshop!

generate html from webpack

I'm trying to generate the HTML through webpack as in CSS and js, but it seems something is missing ,
this webpack.config :

const {resolve} = require('path');
   const webpackValidator = require('webpack-validator');
const OfflinePlugin = require('offline-plugin');

module.exports = webpackValidator({
  debug: true,
  context: resolve('./scripts'),
  entry: './main.js',
  output: {
    filename: './scripts/bundle.js',
    pathinfo: true,
  },
  // Change eval to source-map for production
  devtool: 'eval',
  module: {
    loaders: [
      {
        test:/\.(jsx|js)$/,
        exclude: /node_modules/,
        loader: 'imports?jQuery=jquery,$=jquery,this=>window'
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: "style-loader!css-loader"
      },
      // ASSET LOADER
      { test: /\.(woff|woff2|ttf|eot)$/, loader: 'file' },
       //IMAGE LOADER
      { test: /\.(jpe?g|png|gif|svg)$/i, loader:'file', exclude: /node_modules/ },
      { test: /\.html$/, loader: "html-loader", exclude: /node_modules/ }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx','.css','.jpg']
  },

  plugins: [
    new OfflinePlugin({

      caches: {
        main: [
          '/images/icons/home2.svg',
          '/images/hamburger.svg',
          '/images/logo_grey.svg',
          ':rest:'
        ]
      },
      externals: [
      '/',
        '/images/icons/home2.svg',
        '/images/hamburger.svg',
        '/images/logo_grey.svg',
      ]
    })
  ]
});

any advice?

npm run setup:fem fails....Need help!

When I run npm run setup:fem.... seems lint fails....

My npm and node versions:
npm -v = 3.8.6
node -v = v6.0.0

23:40:29-yc03648~/workshop/webpack/es6-todomvc (master)$ npm run setup:fem

> @ setup:fem /Users/yc03648/workshop/webpack/es6-todomvc
> git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project

Branch FEM/07.1-deploy-surge set up to track remote branch FEM/07.1-deploy-surge from origin.
Switched to a new branch 'FEM/07.1-deploy-surge'
npm WARN [email protected] requires a peer of webpack@^1.4.0 but none was installed.

> @ validate /Users/yc03648/workshop/webpack/es6-todomvc
> npm-run-all --parallel lint build test


> @ lint /Users/yc03648/workshop/webpack/es6-todomvc
> eslint .

▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟

> @ test /Users/yc03648/workshop/webpack/es6-todomvc
> karma start
▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟

> @ prebuild /Users/yc03648/workshop/webpack/es6-todomvc
> rimraf dist

> @ build /Users/yc03648/workshop/webpack/es6-todomvc
> webpack --env.prod -p

  build [==                  ] 10%
/Users/yc03648/workshop/webpack/es6-todomvc/src/app.js
  1:8   error  Unable to resolve path to module 'todomvc-app-css/index.css'  import/no-unresolved
  2:8   error  Unable to resolve path to module './app.css'                  import/no-unresolved
  4:19  error  Unable to resolve path to module './helpers'                  import/no-unresolved
  5:26  error  Unable to resolve path to module './todo'                     import/no-unresolved
  6:25  error  Unable to resolve path to module './graph'                    import/no-unresolved

/Users/yc03648/workshop/webpack/es6-todomvc/src/bootstrap.js
  2:41  error  Unable to resolve path to module 'offline-plugin/runtime'  import/no-unresolved
  3:22  error  Unable to resolve path to module './app'                   import/no-unresolved
  4:19  error  Unable to resolve path to module './helpers'               import/no-unresolved

/Users/yc03648/workshop/webpack/es6-todomvc/src/controller.test.js
  1:24  error  Unable to resolve path to module './controller'  import/no-unresolved

/Users/yc03648/workshop/webpack/es6-todomvc/src/graph/index.js
  1:34  error  Unable to resolve path to module '../todo'  import/no-unresolved

/Users/yc03648/workshop/webpack/es6-todomvc/src/graph/render.js
  1:19  error  Unable to resolve path to module 'react'      import/no-unresolved
  2:22  error  Unable to resolve path to module 'react-dom'  import/no-unresolved
  3:24  error  Unable to resolve path to module 'rd3'        import/no-unresolved
  4:21  error  Unable to resolve path to module 'lodash'     import/no-unresolved

/Users/yc03648/workshop/webpack/es6-todomvc/src/store.js
  1:22  error  Unable to resolve path to module './helpers'  import/no-unresolved

/Users/yc03648/workshop/webpack/es6-todomvc/src/todo.js
  1:18  error  Unable to resolve path to module './view'        import/no-unresolved
  2:24  error  Unable to resolve path to module './controller'  import/no-unresolved
  3:19  error  Unable to resolve path to module './model'       import/no-unresolved
  4:19  error  Unable to resolve path to module './store'       import/no-unresolved
  5:22  error  Unable to resolve path to module './template'    import/no-unresolved
  6:22  error  Unable to resolve path to module './helpers'     import/no-unresolved

/Users/yc03648/workshop/webpack/es6-todomvc/src/view.js
  2:48  error  Unable to resolve path to module './helpers'  import/no-unresolved

✖ 22 problems (22 errors, 0 warnings)


npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/yc03648/.nvm/versions/node/v6.0.0/bin/node" "/Users/yc03648/.nvm/versions/node/v6.0.0/bin/npm" "run-script" "lint"
npm ERR! node v6.0.0
npm ERR! npm  v3.8.6
npm ERR! code ELIFECYCLE
npm ERR! @ lint: `eslint .`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ lint script 'eslint .'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     eslint .
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/yc03648/workshop/webpack/es6-todomvc/npm-debug.log

> @ postbuild /Users/yc03648/workshop/webpack/es6-todomvc
> cpy favicon.ico dist

ERROR: "lint" exited with 1.

npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/yc03648/.nvm/versions/node/v6.0.0/bin/node" "/Users/yc03648/.nvm/versions/node/v6.0.0/bin/npm" "run" "validate"
npm ERR! node v6.0.0
npm ERR! npm  v3.8.6
npm ERR! code ELIFECYCLE
npm ERR! @ validate: `npm-run-all --parallel lint build test`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ validate script 'npm-run-all --parallel lint build test'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm-run-all --parallel lint build test
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/yc03648/workshop/webpack/es6-todomvc/npm-debug.log

npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/yc03648/.nvm/versions/node/v6.0.0/bin/node" "/Users/yc03648/.nvm/versions/node/v6.0.0/bin/npm" "run" "setup:fem"
npm ERR! node v6.0.0
npm ERR! npm  v3.8.6
npm ERR! code ELIFECYCLE
npm ERR! @ setup:fem: `git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ setup:fem script 'git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/yc03648/workshop/webpack/es6-todomvc/npm-debug.log

Error thrown on branch change

Hello.

OS: Windows 10 Version 1709.
Node: 8.10.0
NPM: 5.6.0

Every time I use git checkout -f <branch-name> command, the branch will change but I get this error:

Already on 'FEM/00-original-project'
Your branch is up-to-date with 'origin/FEM/00-original-project'.
module.js:549
    throw err;
    ^

Error: Cannot find module 'E:\cygdrive\e\dev\vscode\webpack-deep-dive\es6-todomvc\.git\hooks\post-checkout'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:188:16)
    at bootstrap_node.js:609:3

I also followed setup instruction for windows 10 and still I get the error.

Cannot Remove "babel-plugin-transform-es2015-modules-commonjs"

Hey - I am also having this issue - same as #9. Except it's on the egghead series. I've also tried cloning the master branch and doing npm install then npm run validate but that also gives the error

offline plugin not caching all the assets

Hi , I followed your frontend master course and I tried to implement webpack with offline plufing service worker to a gulp project , so but it is not working fine I posted the question on stackoverflow no answers , can I get any advice
http://stackoverflow.com/questions/39368597/webpack-offline-plugin-how-to-add-assets-to-sw-js

Error on npm run validate

After I clone and run npm install, I tried to run "npm run validate" as suggested and received this error:

Errors when I run npm run setup:fem

When I run npm run setup:fem I get a lot of errors and setup fails:

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run-script" "lint"
npm ERR! node v6.8.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! @ lint: `eslint .`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ lint script 'eslint .'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     eslint .
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/apple/Documents/learning/webpack/es6-todomvc/npm-debug.log
ERROR: "lint" exited with 1.

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "validate"
npm ERR! node v6.8.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! @ validate: `npm-run-all --parallel lint build test`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ validate script 'npm-run-all --parallel lint build test'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm-run-all --parallel lint build test
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/apple/Documents/learning/webpack/es6-todomvc/npm-debug.log

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "setup:fem"
npm ERR! node v6.8.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! @ setup:fem: `git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ setup:fem script 'git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:

node version 6.8.1
npm version 3.10.8