Screencast ES2015 With Babel JavaScript

  • Carlos Souza
  • 3854 views
Badge student

Locked Content

A subscription is required for viewing this video. Enroll now to get full access to all Code School courses and content.

Enroll Now Sign in

Comments

  1. Imran said

    Nice video. thank you!

  2. David Tang said

    Thanks! Just curious, what mic do you use?

  3. Faculty

    Carlos Souza said

    Thanks!

    @David we use the Samson CL8 Condenser

  4. Hyunju Choi said

    That's easy to understand babel!

  5. Darryl Young said

    Nice video, Carlos. I'm looking forward to playing with this stuff more.

  6. ryanostrom said

    Thanks so much, this is so helpful.

  7. cgautam said

    Easily explained. Thanks Carlos!

  8. Maria said

    I get an error when using Babel to transpile my code. Any help on why this is happening?

    Marias-Mac-mini:demo01_babel Maria$ babel app.js.es6 --presets es2015 TypeError: app.js.es6: Duplicate declaration "Person" 8 | } 9 |

    10 | let Person = new Person("Tyler"); | ^ 11 | console.log(person.greet()); 12 | 13 | at File.buildCodeFrameError (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:408:15) at Scope.checkBlockScopedCollisions (/usr/local/lib/node_modules/babel-cli/node_modules/babel-traverse/lib/scope/index.js:490:27) at Scope. (/usr/local/lib/node_modules/babel-cli/node_modules/babel-traverse/lib/scope/index.js:675:18) at Scope.registerBinding (/usr/local/lib/node_modules/babel-cli/node_modules/babel-traverse/lib/scope/index.js:689:8) at Scope.registerDeclaration (/usr/local/lib/node_modules/babel-cli/node_modules/babel-traverse/lib/scope/index.js:577:14) at Object.BlockScoped (/usr/local/lib/node_modules/babel-cli/node_modules/babel-traverse/lib/scope/index.js:224:28) at Object.newFn (/usr/local/lib/node_modules/babel-cli/node_modules/babel-traverse/lib/visitors.js:309:17) at NodePath._call (/usr/local/lib/node_modules/babel-cli/node_modules/babel-traverse/lib/path/context.js:74:18) at NodePath.call (/usr/local/lib/node_modules/babel-cli/node_modules/babel-traverse/lib/path/context.js:42:14) at NodePath.visit (/usr/local/lib/node_modules/babel-cli/node_modules/babel-traverse/lib/path/context.js:104:12)

  9. Faculty

    Carlos Souza said

    @Maria Part of the error message says 'Duplicate declaration "Person" 8', so my guess is that you are declaring the Person class twice.

  10. Daniela Becerra said

    thank you!!!

  11. Valentin Paramonov said

    Love it.

  12. Netanel Draiman said

    Thank you! great video.

  13. Alex Ne-koi said

    Carlos thank you so much for your course which made my code much clearer and allowed me to program on the next level :)

  14. Eduardo Garcia said

    Thank you!

  15. Ngt said

    Thanks for the video. That was a nice introduction to Babel.

  16. Michael Muita Mugo said

    Awesome intro!

  17. Ilan Kushnir said

    Hi, I get this error:

    npm ERR! tar.unpack untar error /Users/ilan/.npm/babel-cli/6.9.0/package.tgz npm ERR! Darwin 15.5.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "babel-cli" npm ERR! node v4.4.5 npm ERR! npm v2.15.5 npm ERR! path /usr/local/lib/node_modules/babel-cli npm ERR! code EACCES npm ERR! errno -13 npm ERR! syscall mkdir

    npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/babel-cli' npm ERR! at Error (native) npm ERR! { [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/babel-cli'] npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'mkdir', npm ERR! path: '/usr/local/lib/node_modules/babel-cli', npm ERR! fstream_type: 'Directory', npm ERR! fstream_path: '/usr/local/lib/node_modules/babel-cli', npm ERR! fstream_class: 'DirWriter', npm ERR! fstream_stack: npm ERR! [ '/usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:35:25', npm ERR! '/usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:47:53', npm ERR! 'FSReqWrap.oncomplete (fs.js:82:15)' ] } npm ERR! npm ERR! Please try running this command again as root/Administrator.

    npm ERR! Please include the following file with any support request: npm ERR! /Users/ilan/npm-debug.log

  18. Faculty

    Carlos Souza said

    Looks like it's a permission error. Have you tried installing any other npm module globally to see if this issue also shows up ? If you have to run it with sudo, then it's probably an issue with the say npm was setup.

  19. kai said

    cannot install babel ~~dont know why?? npm ERR! tar.unpack untar error /Users/kai/.npm/babel-cli/6.9.0/package.tgz npm ERR! Darwin 15.5.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "babel-cli" npm ERR! node v4.4.5 npm ERR! npm v2.15.5 npm ERR! path /usr/local/lib/node_modules/babel-cli npm ERR! code EACCES npm ERR! errno -13 npm ERR! syscall mkdir

    npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/babel-cli' npm ERR! at Error (native) npm ERR! { [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/babel-cli'] npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'mkdir', npm ERR! path: '/usr/local/lib/node_modules/babel-cli', npm ERR! fstream_type: 'Directory', npm ERR! fstream_path: '/usr/local/lib/node_modules/babel-cli', npm ERR! fstream_class: 'DirWriter', npm ERR! fstream_stack: npm ERR! [ '/usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:35:25', npm ERR! '/usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:47:53', npm ERR! 'FSReqWrap.oncomplete (fs.js:82:15)' ] } npm ERR! npm ERR! Please try running this command again as root/Administrator.

    npm ERR! Please include the following file with any support request: npm ERR! /Users/kai/npm-debug.log

  20. Ilan Kushnir said

    kai - running with sudo solved the problem, thanks Carlos!

  21. kai said

    thanks a lot !! ~~It works~

  22. grbulk said

    Great lecture, great (fast brained) teacher. Thanks for your work!

  23. tredudman said

    When I run "babel --version" I keep getting "babel: command not found" I have nodejs updated to v4.4.7 and then ran the code "npm install -g babel-cli". It installs as a success much like Carlos in the video, with the latest versions in my case, however babel --version still doesn't work... I get the same "command not found" message when converting the app.js.es6 file later in the video. Your thoughts would be greatly appreciated XD

  24. Gonzalo Andres Vergara said

    Nice video, precise and clear!

  25. Nermien Barakat said

    Thank you!! but i have two question. What is the different between sudo and the other command? and how you saved the file at 3:44 ?

  26. Faculty

    Carlos Souza said

    @tredudman Hey, there's a couple different things that might be causing this issue for you. Would you mind asking your question on our forum ? https://www.codeschool.com/discuss/ We'll be able to help you there!

  27. Faculty

    Carlos Souza said

    @NermienBarakat Running a command with sudo will run it as the root user of the system, with complete access to all of the files and directories on the machine. I saved the file using esc + colon + x, which is the vim command to save and exit.

  28. rmdobservations said

    Video 3:09 I am getting a lot more files in node_modules than just babel_cli. From http://stackoverflow.com/a/33794337/7624312, "No there's nothing wrong, NPM now installs all dependencies to the root modules folder unless there is a version conflict. All those other modules you are seeing are dependencies of the modules you installed."

  29. tenPin said

    HAHA How did you save the file?

  30. happyplaying said

    I got this error Error: Cannot find module 'lodash/isPlainObject' (While processing preset: "/Users/chao/Documents/Node Projects/Work/webservices.luminus.io/node_modules/babel-preset-es2015/lib/index.js") at Function.Module.resolveFilename (module.js:485:15) at Function.Module.load (module.js:437:25) at Module.require (module.js:513:17) at require (internal/module.js:11:18) at Object. (/Users/chao/Documents/Node Projects/Work/webservices.luminus.io/nodemodules/babel-types/lib/converters.js:27:22) at Module.compile (module.js:569:30) at Object.Module.extensions..js (module.js:580:10) at Module.load (module.js:503:32) at tryModuleLoad (module.js:466:12) at Function.Module.load (module.js:458:3)

  31. Faculty

    Carlos Souza said

    @happyplaing Looks like it can't find a module from lodash. Have you tried installing lodash ?

About This Screencast

In this episode, Carlos Souza will walk through how to write ES2015 code by using Babel. This will allow you to run this code across all major browsers. If you're not familiar with ES2015, head on over to the ES2015: The Shape of JavaScript to Come course now!

You need to be an enrolled student in order to view this video and subscribe.

Enroll Now