title
Use Babel & Webpack To Compile ES2015 - ES2017

description
In this video we will build the Babel Webpack Starter Pack which is a workflow to compile ES2015/ES6, ES2016/ES7 and ES2017 code down to ES5. This allows us to use ES6 modules and later ECMAScript features such as async/await. We will also setup webpack-dev-server to have an auto load server without having to re-compile SPONSOR: GDP HOST - WANT CHEAP WEB HOSTING? https://goo.gl/iZjcGk CODE: https://github.com/bradtraversy/babel_webpack_starter 💖 BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia VISIT MY WEBISTE: Check Out My Udemy Courses http://www.traversymedia.com FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia https://discord.gg/traversymedia

detail
{'title': 'Use Babel & Webpack To Compile ES2015 - ES2017', 'heatmap': [{'end': 380.422, 'start': 338.636, 'weight': 0.787}, {'end': 827.353, 'start': 784.836, 'weight': 0.991}], 'summary': 'Tutorial covers setting up a javascript development workflow using webpack and babel, including support for es5, es6, es2016, and es2017, as well as the use of webpack dev server and sponsorship by gpd host. it also delves into the role of webpack in compiling front-end frameworks, setting up babel with presets, and the process of setting up and compiling code, along with exploring es2017 modules, async await, and the fetch function for http requests.', 'chapters': [{'end': 96.822, 'segs': [{'end': 62.547, 'src': 'embed', 'start': 35.86, 'weight': 0, 'content': [{'end': 40.541, 'text': "So even features like a sync await, we're going to be able to compile those down.", 'start': 35.86, 'duration': 4.681}, {'end': 46.123, 'text': "And we're going to do that by using Webpack along with Babel and a couple of different presets.", 'start': 40.921, 'duration': 5.202}, {'end': 54.797, 'text': "Not only that, but I'm also going to show you how to set up Webpack Dev Server so that you can have a server environment that you can work in,", 'start': 46.846, 'duration': 7.951}, {'end': 58.942, 'text': "so you don't have to keep compiling down, loading your application and so on.", 'start': 54.797, 'duration': 4.145}, {'end': 62.547, 'text': "It'll just constantly load in the browser every time you save your file.", 'start': 59.022, 'duration': 3.525}], 'summary': 'Using webpack, babel, and presets to compile features for a more efficient development process.', 'duration': 26.687, 'max_score': 35.86, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iWUR04B42Hc/pics/iWUR04B42Hc35860.jpg'}], 'start': 7.864, 'title': 'Setting up javascript development workflow', 'summary': 'Discusses setting up a development workflow to compile ecmascript features using webpack and babel, with support for es5, es6, es2016, and es2017. it also covers setting up webpack dev server for a seamless server environment, along with sponsorship by gpd host for affordable hosting plans and additional services.', 'chapters': [{'end': 96.822, 'start': 7.864, 'title': 'Setting up javascript development workflow', 'summary': 'Discusses setting up a development workflow to compile ecmascript features down to browser runnable code using webpack and babel, including support for es5, es6, es2016, and es2017, along with setting up webpack dev server for a seamless server environment. it also mentions the sponsorship by gpd host for affordable hosting plans and additional services.', 'duration': 88.958, 'highlights': ['The video covers setting up a development workflow to compile ECMAScript features down to browser runnable code using Webpack and Babel, including support for ES5, ES6, ES2016, and ES2017, and setting up Webpack Dev Server for a seamless server environment.', 'The chapter mentions the sponsorship by GPD Host for affordable hosting plans and additional services, including free SSL certificate, free domain name, website builder, and free website migration with no downtime.', 'The speaker mentions the availability of a crash course on Webpack on their channel for interested viewers.']}], 'duration': 88.958, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iWUR04B42Hc/pics/iWUR04B42Hc7864.jpg', 'highlights': ['The video covers setting up a development workflow to compile ECMAScript features down to browser runnable code using Webpack and Babel, including support for ES5, ES6, ES2016, and ES2017, and setting up Webpack Dev Server for a seamless server environment.', 'The chapter mentions the sponsorship by GPD Host for affordable hosting plans and additional services, including free SSL certificate, free domain name, website builder, and free website migration with no downtime.', 'The speaker mentions the availability of a crash course on Webpack on their channel for interested viewers.']}, {'end': 243.725, 'segs': [{'end': 123.368, 'src': 'embed', 'start': 97.222, 'weight': 1, 'content': [{'end': 103.384, 'text': "But basically it's used to take modules with dependencies and generate static assets from them.", 'start': 97.222, 'duration': 6.162}, {'end': 111.625, 'text': 'OK, that way we can build stuff with modules, either custom that that we build ourselves or stuff that we install from NPM,', 'start': 103.604, 'duration': 8.021}, {'end': 114.606, 'text': 'and we can compile it down to code that can run in the browser.', 'start': 111.625, 'duration': 2.981}, {'end': 115.506, 'text': 'All right.', 'start': 115.226, 'duration': 0.28}, {'end': 117.867, 'text': 'So Webpack is an amazing technology.', 'start': 115.546, 'duration': 2.321}, {'end': 123.368, 'text': "It's what runs behind things like the Angular CLI, the Create React App CLI.", 'start': 117.927, 'duration': 5.441}], 'summary': 'Webpack compiles modules into static assets for browser, used by angular cli and create react app cli.', 'duration': 26.146, 'max_score': 97.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iWUR04B42Hc/pics/iWUR04B42Hc97222.jpg'}, {'end': 194.862, 'src': 'embed', 'start': 163.844, 'weight': 0, 'content': [{'end': 174.093, 'text': 'Babel is a compiler that will take features from the latest versions of JavaScript or ECMAScript and bring them down to ES5.', 'start': 163.844, 'duration': 10.249}, {'end': 183.172, 'text': 'So real quick, if we go up to try it out, then this is babeljs.io slash REPL or R-E-P-L.', 'start': 175.646, 'duration': 7.526}, {'end': 190.938, 'text': "Now here, what we can do is put ES6 plus code here and it'll get compiled over here to ES5.", 'start': 184.173, 'duration': 6.765}, {'end': 194.862, 'text': 'So you can actually see the conversion and what that looks like.', 'start': 191.019, 'duration': 3.843}], 'summary': 'Babel compiler converts es6 code to es5 for easy testing and visualization.', 'duration': 31.018, 'max_score': 163.844, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iWUR04B42Hc/pics/iWUR04B42Hc163844.jpg'}], 'start': 97.222, 'title': 'Webpack and babel', 'summary': 'Delves into the role of webpack in compiling front-end frameworks and its presets, like react and babel, converting es6+ code to es5, and provides examples of let and arrow function conversion.', 'chapters': [{'end': 243.725, 'start': 97.222, 'title': 'Understanding webpack and babel', 'summary': 'Explains the role of webpack in compiling front-end frameworks and its presets, like react and babel, to convert es6+ code to es5, with examples of let and arrow function conversion.', 'duration': 146.503, 'highlights': ['Webpack compiles front-end frameworks and their dependencies to static assets that can run in a browser Webpack is used to compile front-end frameworks and their dependencies down to static assets for browser execution.', 'Webpack uses presets like React and Babel to add extra functionality and compile specific types of code Webpack utilizes presets like React and Babel to enhance functionality and compile specific types of code.', 'Babel is a compiler that converts features from the latest versions of JavaScript to ES5 Babel functions as a compiler to convert the latest JavaScript features to ES5.', "Babel's REPL can be used to visualize the conversion of ES6+ code to ES5, demonstrated with examples of let and arrow function conversion Babel's REPL demonstrates the conversion of ES6+ code to ES5, illustrated with examples of let and arrow function conversion."]}], 'duration': 146.503, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iWUR04B42Hc/pics/iWUR04B42Hc97222.jpg', 'highlights': ['Webpack compiles front-end frameworks and their dependencies to static assets for browser execution.', 'Webpack utilizes presets like React and Babel to enhance functionality and compile specific types of code.', 'Babel functions as a compiler to convert the latest JavaScript features to ES5.', "Babel's REPL demonstrates the conversion of ES6+ code to ES5, illustrated with examples of let and arrow function conversion."]}, {'end': 754.978, 'segs': [{'end': 382.403, 'src': 'heatmap', 'start': 322.815, 'weight': 2, 'content': [{'end': 327.337, 'text': "Now, I'm going to be using my integrated terminal with VS Code.", 'start': 322.815, 'duration': 4.522}, {'end': 333.8, 'text': 'So if you want to do that, you can go to View, Integrated Terminal, or you can do Control-Tilde, and you can toggle it that way.', 'start': 327.397, 'duration': 6.403}, {'end': 337.602, 'text': 'I also have Git Bash integrated with the terminal.', 'start': 333.82, 'duration': 3.782}, {'end': 344.54, 'text': "so, first thing we're going to do is run npm init because we want a package.json file.", 'start': 338.636, 'duration': 5.904}, {'end': 351.684, 'text': "now, if you've never worked with webpack before, you're probably wondering saying what are we building a node.js application?", 'start': 344.54, 'duration': 7.144}, {'end': 353.665, 'text': 'why are we doing, you know, building a?', 'start': 351.684, 'duration': 1.981}, {'end': 356.427, 'text': 'why are we creating a package.json file?', 'start': 353.665, 'duration': 2.762}, {'end': 358.868, 'text': "well, that's what webpack does.", 'start': 356.427, 'duration': 2.441}, {'end': 369.415, 'text': 'it allows you to use npm modules or your own modules, And it compiles them down to static assets so that you can run it in the browser.', 'start': 358.868, 'duration': 10.547}, {'end': 372.817, 'text': "You don't need a node server to run.", 'start': 369.455, 'duration': 3.362}, {'end': 374.218, 'text': "That's the beauty of Webpack.", 'start': 372.877, 'duration': 1.341}, {'end': 376.679, 'text': "So that's what we're going to do.", 'start': 375.178, 'duration': 1.501}, {'end': 380.422, 'text': "We're just going to create a simple package.json file real quick.", 'start': 376.699, 'duration': 3.723}, {'end': 382.403, 'text': "And let's open that up.", 'start': 381.162, 'duration': 1.241}], 'summary': 'Using vs code integrated terminal, running npm init to create package.json for webpack to compile modules into static assets for browser use.', 'duration': 59.588, 'max_score': 322.815, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iWUR04B42Hc/pics/iWUR04B42Hc322815.jpg'}, {'end': 754.978, 'src': 'embed', 'start': 729.071, 'weight': 0, 'content': [{'end': 735.572, 'text': 'We have an entry point for our ES6 and ES7 and whatever else we want to write.', 'start': 729.071, 'duration': 6.501}, {'end': 736.993, 'text': 'We can use modules.', 'start': 735.892, 'duration': 1.101}, {'end': 740.414, 'text': 'We can use whatever we want from any standard.', 'start': 737.033, 'duration': 3.381}, {'end': 745.775, 'text': "And then it's going to be output into build slash app.bundle.js.", 'start': 740.794, 'duration': 4.981}, {'end': 749.316, 'text': "And that's the file we want to include in our HTML.", 'start': 746.195, 'duration': 3.121}, {'end': 754.978, 'text': 'And then we just have our Babel loader as our module here, as our loader.', 'start': 750.257, 'duration': 4.721}], 'summary': 'Using babel loader for es6 and es7, output to app.bundle.js for html inclusion.', 'duration': 25.907, 'max_score': 729.071, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iWUR04B42Hc/pics/iWUR04B42Hc729071.jpg'}], 'start': 244.682, 'title': 'Setting up webpack and babel for javascript', 'summary': "Discusses setting up webpack with babel, using presets, and the deprecation of the 'latest' preset in favor of 'env', emphasizing its powerful features for targeting browsers, versions, and specific features. it also illustrates setting up babel and webpack to compile javascript code, explaining the process and dependencies, and creating a configuration file for the compilation into es5, highlighting the use of babel loader for transforming es6 and es7 features.", 'chapters': [{'end': 296.041, 'start': 244.682, 'title': 'Webpack, babel, and presets', 'summary': "Discusses setting up webpack with babel, using presets, and the deprecation of the 'latest' preset in favor of 'env', highlighting its powerful features for targeting browsers, versions, and specific features.", 'duration': 51.359, 'highlights': ["Babel presets are plugins for compiling down different versions of JavaScript, such as ES2015, ES2016, and ES2017, and 'Latest' preset combined all three (relevance: 5)", "The 'Latest' preset has been deprecated in favor of 'ENV', which offers powerful features for targeting specific browsers, versions, and features (relevance: 4)", 'ENV preset allows targeting specific browsers, versions, and features, and can be used without any additional configuration (relevance: 3)']}, {'end': 754.978, 'start': 296.101, 'title': 'Setting up babel and webpack for javascript compilation', 'summary': 'Illustrates setting up babel and webpack to compile javascript code, explaining the process and dependencies, and creating a configuration file for the compilation into es5, emphasizing the use of babel loader for transforming es6 and es7 features.', 'duration': 458.877, 'highlights': ['Explaining the purpose of Webpack and its ability to compile static assets for browser usage without the need for a node server Webpack enables the use of npm modules to be compiled into static assets for browser execution without a node server, simplifying the deployment process.', 'Detailing the installation of necessary dependencies such as webpack, webpack dev server, babel core, babel loader, and babel-preset-env The installation of webpack, webpack dev server, babel core, babel loader, and babel-preset-env is crucial for setting up the environment for JavaScript compilation.', 'Creating a configuration file for Webpack and defining the entry point, output path, and loaders The configuration file for Webpack is created to define the entry point, output path, and loaders, facilitating the compilation of JavaScript code and transformation of ES6 and ES7 features.']}], 'duration': 510.296, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iWUR04B42Hc/pics/iWUR04B42Hc244682.jpg', 'highlights': ["Babel presets are plugins for compiling down different versions of JavaScript, such as ES2015, ES2016, and ES2017, and 'Latest' preset combined all three (relevance: 5)", "The 'Latest' preset has been deprecated in favor of 'ENV', which offers powerful features for targeting specific browsers, versions, and features (relevance: 4)", 'Explaining the purpose of Webpack and its ability to compile static assets for browser usage without the need for a node server Webpack enables the use of npm modules to be compiled into static assets for browser execution without a node server, simplifying the deployment process.']}, {'end': 1245.982, 'segs': [{'end': 847.279, 'src': 'heatmap', 'start': 784.836, 'weight': 0, 'content': [{'end': 789.64, 'text': "I can't type console.log123 and save.", 'start': 784.836, 'duration': 4.804}, {'end': 791.022, 'text': 'All right.', 'start': 790.721, 'duration': 0.301}, {'end': 793.924, 'text': 'So what I want to do now is compile this.', 'start': 791.162, 'duration': 2.762}, {'end': 798.609, 'text': 'So if we look in package.json, we created our build script here.', 'start': 794.465, 'duration': 4.144}, {'end': 800.53, 'text': 'So we should be able to run this.', 'start': 799.009, 'duration': 1.521}, {'end': 803.393, 'text': "So let's open up our terminal.", 'start': 802.012, 'duration': 1.381}, {'end': 805.054, 'text': "We'll clear it out.", 'start': 803.413, 'duration': 1.641}, {'end': 807.957, 'text': "We'll say npm run build.", 'start': 805.094, 'duration': 2.863}, {'end': 812.82, 'text': 'Alright, so no red, so no errors.', 'start': 810.618, 'duration': 2.202}, {'end': 814.542, 'text': 'Everything should have went alright.', 'start': 812.96, 'duration': 1.582}, {'end': 817.845, 'text': 'So up here, if we look, we have a build folder now.', 'start': 814.602, 'duration': 3.243}, {'end': 819.286, 'text': 'Creates automatically.', 'start': 818.205, 'duration': 1.081}, {'end': 820.447, 'text': "We don't have to create it.", 'start': 819.326, 'duration': 1.121}, {'end': 823.35, 'text': 'And then an app.bundle.js.', 'start': 821.088, 'duration': 2.262}, {'end': 827.353, 'text': "Now there's going to be a bunch of crap in here that doesn't matter to us.", 'start': 823.41, 'duration': 3.943}, {'end': 830.556, 'text': 'What we do want to look at, if we keep scrolling..', 'start': 828.194, 'duration': 2.362}, {'end': 832.479, 'text': 'is this right here.', 'start': 831.517, 'duration': 0.962}, {'end': 836.064, 'text': 'So this is the code that we wrote compiled.', 'start': 833.079, 'duration': 2.985}, {'end': 842.813, 'text': 'So you can see that it used var instead of let, and it used a regular function instead of an arrow function.', 'start': 836.164, 'duration': 6.649}, {'end': 847.279, 'text': 'So this ES6 got compiled down to this ES5.', 'start': 843.434, 'duration': 3.845}], 'summary': 'Compiled es6 code to es5, no errors, created build folder and app.bundle.js', 'duration': 62.443, 'max_score': 784.836, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iWUR04B42Hc/pics/iWUR04B42Hc784836.jpg'}, {'end': 972.418, 'src': 'embed', 'start': 950.176, 'weight': 2, 'content': [{'end': 959.161, 'text': "Now, keeping it like this is going to be kind of a pain in the ass, because every time you make a change, you're going to have to recompile.", 'start': 950.176, 'duration': 8.985}, {'end': 967.667, 'text': "If we change this from 123 to, let's say, hello and save and we open up our index.html again.", 'start': 959.221, 'duration': 8.446}, {'end': 972.418, 'text': 'look, in the console we still get one, two, three, all right.', 'start': 968.616, 'duration': 3.802}], 'summary': 'Recompiling code after every change is inconvenient and results in unchanged output in the console.', 'duration': 22.242, 'max_score': 950.176, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iWUR04B42Hc/pics/iWUR04B42Hc950176.jpg'}, {'end': 1032.17, 'src': 'embed', 'start': 1000.372, 'weight': 4, 'content': [{'end': 1016.773, 'text': 'that way we can just do NPM start All right, and then we want to set this to webpack-dev-server and then we need to specify an output flag.', 'start': 1000.372, 'duration': 16.401}, {'end': 1029.367, 'text': "So we're going to say output-public-path, and we want to set that equal to whatever our output path was, which is build.", 'start': 1017.433, 'duration': 11.934}, {'end': 1032.17, 'text': 'So we want to go like that.', 'start': 1031.166, 'duration': 1.004}], 'summary': "Configuring npm to start webpack-dev-server with output-public-path set to 'build'.", 'duration': 31.798, 'max_score': 1000.372, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iWUR04B42Hc/pics/iWUR04B42Hc1000372.jpg'}], 'start': 755.698, 'title': 'Setting up and compiling code', 'summary': "Covers creating a new 'source' folder, compiling code to create a build folder, converting es6 to es5, integrating code into html, using webpack dev server for live reloads, and leveraging the module system for building applications.", 'chapters': [{'end': 817.845, 'start': 755.698, 'title': 'Creating a new source folder and compiling code', 'summary': "Discusses creating a new 'source' folder and compiling code using npm run build, resulting in the creation of a build folder.", 'duration': 62.147, 'highlights': ["Creating a new 'source' folder called source and compiling code using npm run build Demonstrates the process of creating a new 'source' folder and compiling code using npm run build.", 'Resulting in the creation of a build folder Highlights the outcome of the process, which leads to the creation of a build folder.']}, {'end': 972.418, 'start': 818.205, 'title': 'Es6 to es5 compilation and html integration', 'summary': 'Demonstrates the process of compiling es6 code to es5 using var and regular functions, integrating the compiled code into an html file, and the need to recompile when making changes.', 'duration': 154.213, 'highlights': ['The process of compiling ES6 code to ES5 using var and regular functions is demonstrated, ensuring compatibility with all browsers.', 'The integration of the compiled code into an HTML file is shown, including the creation of an index.html file and the inclusion of the app.bundle.js script.', 'The need to recompile the code when making changes is highlighted, emphasizing the potential inconvenience of this process.']}, {'end': 1245.982, 'start': 972.418, 'title': 'Using webpack dev server and modules in javascript', 'summary': 'Explains how to use webpack dev server to continuously watch and run javascript applications, allowing for live reloads and the benefits of using the module system for building applications.', 'duration': 273.564, 'highlights': ['Using Webpack Dev Server for live reloads and continuous watching of applications The chapter demonstrates setting up Webpack Dev Server to run on port 8081, allowing for continuous watching and live reloads of the application, providing a smoother development experience.', 'Utilizing the module system for building applications The chapter showcases the use of the module system by creating a separate module in lib.js, exporting a person object, and importing it into app.js, demonstrating the power and organization offered by the module system.']}], 'duration': 490.284, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iWUR04B42Hc/pics/iWUR04B42Hc755698.jpg', 'highlights': ["Demonstrates the process of creating a new 'source' folder and compiling code using npm run build.", 'Resulting in the creation of a build folder.', 'The process of compiling ES6 code to ES5 using var and regular functions is demonstrated, ensuring compatibility with all browsers.', 'The integration of the compiled code into an HTML file is shown, including the creation of an index.html file and the inclusion of the app.bundle.js script.', 'Using Webpack Dev Server for live reloads and continuous watching of applications.', 'Utilizing the module system for building applications.']}, {'end': 1483.407, 'segs': [{'end': 1345.438, 'src': 'embed', 'start': 1281.861, 'weight': 0, 'content': [{'end': 1283.622, 'text': "That's going to reload every time we save.", 'start': 1281.861, 'duration': 1.761}, {'end': 1285.804, 'text': 'Maybe we should do a console log.', 'start': 1284.383, 'duration': 1.421}, {'end': 1297.902, 'text': "And then what we can do is we're using destructuring here and we can also pull out other things from this file such as say hello.", 'start': 1289.093, 'duration': 8.809}, {'end': 1303.048, 'text': "And then we'll go down here and we'll call say hello.", 'start': 1299.264, 'duration': 3.784}, {'end': 1307.347, 'text': "And let's pass in a name.", 'start': 1305.786, 'duration': 1.561}, {'end': 1308.467, 'text': "We'll just say Brad.", 'start': 1307.387, 'duration': 1.08}, {'end': 1310.347, 'text': "Let's save.", 'start': 1309.567, 'duration': 0.78}, {'end': 1313.068, 'text': 'And down here, whoops, wait a minute.', 'start': 1310.908, 'duration': 2.16}, {'end': 1320.611, 'text': 'What did I do? Oh, since I just returned it here, we have to console log the function.', 'start': 1313.228, 'duration': 7.383}, {'end': 1326.272, 'text': "So we'll save.", 'start': 1325.532, 'duration': 0.74}, {'end': 1328.673, 'text': 'And then we get John Doe, which comes from this line.', 'start': 1326.352, 'duration': 2.321}, {'end': 1330.714, 'text': 'And then hello Brad, which comes from this.', 'start': 1328.793, 'duration': 1.921}, {'end': 1334.495, 'text': 'And both of these are coming from our lib.js file here.', 'start': 1331.254, 'duration': 3.241}, {'end': 1337.873, 'text': 'All right, so that is modules.', 'start': 1336.092, 'duration': 1.781}, {'end': 1345.438, 'text': 'Now I want to take a look at a newer feature of ES2017, which is Async Await.', 'start': 1337.973, 'duration': 7.465}], 'summary': 'Using destructuring and async await in es2017 for module reloading and console logging.', 'duration': 63.577, 'max_score': 1281.861, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iWUR04B42Hc/pics/iWUR04B42Hc1281861.jpg'}], 'start': 1246.002, 'title': 'Es2017 modules and fetch', 'summary': 'Introduces es2017 modules, including exporting functions and using destructuring, and also explores the newer feature of async await. additionally, it covers using the fetch function to make http requests to jason placeholder, illustrating the process of making asynchronous calls and handling promises.', 'chapters': [{'end': 1371.824, 'start': 1246.002, 'title': 'Es2017 modules and async await', 'summary': 'Introduces es2017 modules and demonstrates exporting functions, using destructuring, and calling functions, followed by a brief mention of the newer feature of es2017, async await, which is a better way to handle asynchronous operations.', 'duration': 125.822, 'highlights': ["The chapter demonstrates exporting a function called 'say hello' which takes in a name and returns a template literal that says hello followed by the name.", "It also shows the usage of destructuring to pull out the 'say hello' function from the file and how to call it with a specific name, resulting in console logged outputs of 'John Doe' and 'hello Brad'.", 'Lastly, the chapter briefly mentions the newer feature of ES2017, Async Await, as a better way to handle asynchronous operations, by labeling a function as asynchronous, making it return a promise automatically.']}, {'end': 1483.407, 'start': 1371.844, 'title': 'Using fetch to get posts', 'summary': 'Demonstrates using the fetch function to make http requests to a fake rest api called jason placeholder and retrieve data as a promise, illustrating the process of making asynchronous calls and handling promises.', 'duration': 111.563, 'highlights': ['The chapter demonstrates using the fetch function to make HTTP requests to a fake REST API called Jason Placeholder. This showcases the practical implementation of the fetch function to interact with a mock REST API, providing hands-on experience with fetching data.', 'Retrieving data as a promise is illustrated, emphasizing the process of making asynchronous calls and handling promises. The demonstration emphasizes the usage of asynchronous functions and the handling of promises when fetching data, showcasing the practical application of these concepts.']}], 'duration': 237.405, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iWUR04B42Hc/pics/iWUR04B42Hc1246002.jpg', 'highlights': ['The chapter demonstrates using the fetch function to make HTTP requests to a fake REST API called Jason Placeholder, providing hands-on experience with fetching data.', "It also shows the usage of destructuring to pull out the 'say hello' function from the file and how to call it with a specific name, resulting in console logged outputs of 'John Doe' and 'hello Brad'.", "The chapter demonstrates exporting a function called 'say hello' which takes in a name and returns a template literal that says hello followed by the name."]}, {'end': 1792.368, 'segs': [{'end': 1547.8, 'src': 'embed', 'start': 1483.407, 'weight': 2, 'content': [{'end': 1488.593, 'text': "so if we go ahead and save this and we let this run, we're going to get an error.", 'start': 1483.407, 'duration': 5.186}, {'end': 1490.995, 'text': 'so we get this regenerator run.', 'start': 1488.593, 'duration': 2.402}, {'end': 1498.523, 'text': 'time is not defined and to fix this we actually need to use the babel polyfill.', 'start': 1490.995, 'duration': 7.528}, {'end': 1508.442, 'text': "all right, if i were to search this, let's see what we get if we search this error here, Right here.", 'start': 1498.523, 'duration': 9.919}, {'end': 1511.865, 'text': "I'm trying to use async await with babel 6.", 'start': 1508.482, 'duration': 3.383}, {'end': 1514.526, 'text': 'so right here, babel polyfill is required.', 'start': 1511.865, 'duration': 2.661}, {'end': 1516.467, 'text': 'You must use that in order to get.', 'start': 1514.526, 'duration': 1.941}, {'end': 1517.768, 'text': 'why is this not responsive??', 'start': 1516.467, 'duration': 1.301}, {'end': 1520.03, 'text': 'Why is stack overflow not responsive?', 'start': 1518.028, 'duration': 2.002}, {'end': 1530.956, 'text': "But you'll see that we need to install babel polyfill along with this babel preset stage 0 and then down here.", 'start': 1521.33, 'duration': 9.626}, {'end': 1536.018, 'text': 'we need to add that to our webpack config file.', 'start': 1532.397, 'duration': 3.621}, {'end': 1538.618, 'text': "okay, so let's do that.", 'start': 1536.018, 'duration': 2.6}, {'end': 1541.239, 'text': "let's go ahead and control-c.", 'start': 1538.618, 'duration': 2.621}, {'end': 1545.64, 'text': "stop this webpack dev server and we're going to do npm.", 'start': 1541.239, 'duration': 4.401}, {'end': 1547.8, 'text': 'install dash dash.', 'start': 1545.64, 'duration': 2.16}], 'summary': 'Error in using async await with babel 6, requires babel polyfill and webpack config update.', 'duration': 64.393, 'max_score': 1483.407, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iWUR04B42Hc/pics/iWUR04B42Hc1483407.jpg'}, {'end': 1724.767, 'src': 'embed', 'start': 1698.826, 'weight': 0, 'content': [{'end': 1703.188, 'text': "So it's something that you can continuously use, and hopefully you guys will use it.", 'start': 1698.826, 'duration': 4.362}, {'end': 1709.832, 'text': "Now as far as compiling, like, let's say, you just built an awesome application with modules, with async,", 'start': 1703.729, 'duration': 6.103}, {'end': 1713.274, 'text': 'await and all that all you got to do is now simply do an.', 'start': 1709.832, 'duration': 3.442}, {'end': 1716.945, 'text': 'or is it npm run build.', 'start': 1715.444, 'duration': 1.501}, {'end': 1724.767, 'text': 'And then it builds it out into that app dot bundle file, you have your index HTML file.', 'start': 1719.485, 'duration': 5.282}], 'summary': 'Continuous use encouraged; simply compile with npm run build.', 'duration': 25.941, 'max_score': 1698.826, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iWUR04B42Hc/pics/iWUR04B42Hc1698826.jpg'}, {'end': 1792.368, 'src': 'embed', 'start': 1775.601, 'weight': 1, 'content': [{'end': 1778.763, 'text': 'All hosting plans are completely managed and easy to work with.', 'start': 1775.601, 'duration': 3.162}, {'end': 1781.264, 'text': 'You also get automatic weekly backups.', 'start': 1779.103, 'duration': 2.161}, {'end': 1788.138, 'text': "so whether you have a website to transfer or you're building it from scratch, gpdhost is a high quality solution.", 'start': 1781.724, 'duration': 6.414}, {'end': 1792.368, 'text': 'to learn more, visit gpdhost.com or click the link in the description below.', 'start': 1788.138, 'duration': 4.23}], 'summary': 'Managed hosting plans with automatic weekly backups. visit gpdhost.com for more.', 'duration': 16.767, 'max_score': 1775.601, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iWUR04B42Hc/pics/iWUR04B42Hc1775601.jpg'}], 'start': 1483.407, 'title': 'Babel polyfill, preset stage 0, and webpack babel starter', 'summary': "Explains integrating babel polyfill and babel preset stage 0 to resolve 'time is not defined' error with async await, and discusses using webpack babel starter package to compile es2015-17 to es5, simplifying the building process.", 'chapters': [{'end': 1672.507, 'start': 1483.407, 'title': 'Integrating babel polyfill and babel preset stage 0', 'summary': "Explains the process of integrating babel polyfill and babel preset stage 0 to resolve the 'time is not defined' error when using async await with babel 6, involving npm installation and webpack configuration adjustments.", 'duration': 189.1, 'highlights': ["The process of integrating Babel polyfill and Babel preset stage 0 is explained. The need for Babel polyfill and Babel preset stage 0 to resolve the 'time is not defined' error is highlighted.", 'The specific steps for npm installation of Babel polyfill and Babel preset stage 0 are outlined. The detailed process for npm installation of Babel polyfill and Babel preset stage 0 is provided.', 'The adjustments needed in the webpack configuration file are explained. The necessary adjustments in the webpack configuration file to include Babel polyfill and Babel preset stage 0 are highlighted.']}, {'end': 1756.105, 'start': 1672.547, 'title': 'Webpack babel starter package', 'summary': 'Discusses using the webpack babel starter package to compile down es2015, 16, and 17 to es5, and how it simplifies the building and compiling process for web applications.', 'duration': 83.558, 'highlights': ['The Webpack Babel starter package can be used to compile down anything from ES2015, 16, and 17 to ES5, providing a continuous and versatile solution for web development.', "By running 'npm run build', the package simplifies the building and compiling process for web applications with modules, async, and await, resulting in a single file bundle despite the number of modules used."]}, {'end': 1792.368, 'start': 1756.105, 'title': 'Gpd hosts: affordable, fast, quality hosting', 'summary': 'Highlights gpd hosts as an affordable, fast, and quality cpanel hosting provider that includes free domain name, ssl certificate, website builder, and automatic weekly backups.', 'duration': 36.263, 'highlights': ['GPD Hosts offers affordable, fast, and quality cPanel hosting with free domain name, SSL certificate, website builder, and automatic weekly backups.', 'All hosting plans are completely managed and easy to work with.', 'Visitors can learn more by visiting gpdhost.com or clicking the link in the description below.']}], 'duration': 308.961, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iWUR04B42Hc/pics/iWUR04B42Hc1483407.jpg', 'highlights': ['The Webpack Babel starter package simplifies the building and compiling process for web applications with modules, async, and await, resulting in a single file bundle despite the number of modules used.', "The process of integrating Babel polyfill and Babel preset stage 0 is explained. The need for Babel polyfill and Babel preset stage 0 to resolve the 'time is not defined' error is highlighted.", 'The specific steps for npm installation of Babel polyfill and Babel preset stage 0 are outlined. The detailed process for npm installation of Babel polyfill and Babel preset stage 0 is provided.', 'The adjustments needed in the webpack configuration file are explained. The necessary adjustments in the webpack configuration file to include Babel polyfill and Babel preset stage 0 are highlighted.', 'The Webpack Babel starter package can be used to compile down anything from ES2015, 16, and 17 to ES5, providing a continuous and versatile solution for web development.']}], 'highlights': ['The video covers setting up a development workflow to compile ECMAScript features down to browser runnable code using Webpack and Babel, including support for ES5, ES6, ES2016, and ES2017, and setting up Webpack Dev Server for a seamless server environment.', 'Webpack compiles front-end frameworks and their dependencies to static assets for browser execution.', "Babel presets are plugins for compiling down different versions of JavaScript, such as ES2015, ES2016, and ES2017, and 'Latest' preset combined all three.", "Demonstrates the process of creating a new 'source' folder and compiling code using npm run build.", 'The chapter demonstrates using the fetch function to make HTTP requests to a fake REST API called Jason Placeholder, providing hands-on experience with fetching data.', 'The Webpack Babel starter package simplifies the building and compiling process for web applications with modules, async, and await, resulting in a single file bundle despite the number of modules used.']}