[00:12] We're going to have this accept a name argument. Then we'll use string interpolation to insert that name into the resulting string, so replace "World" there with our sign curly braces and a variable inside that string.
[00:31] We pass this "World." We expect to get "Hello World" back. Then, I'm going to come down here and I'm going to update my default export to export getGreeting. I can save that.
[00:45] I'm going to jump back into index.js where I'm consuming this. I'm going to import getGreeting from greet. In here, I'm going to call that function and I'm going to pass it the string "World."
[01:03] I can save that. Now that we've updated this code, let's drop into the terminal and I'm going to do an npm run build to run webpack. We'll see that we get some output. We have an app.bundle.js based on this new code.
[01:18] I'm going to run node dist/app.bundle.js. Let's see what this code does. We'll see that we get our console of "Hello World," exactly what we'd expect. Let's take a look of the output. We're looking at the minified production output from webpack, but if we jump to the very end of the file, we'll be able to tell what's happening in this code.
[01:42] If we'd look at this output code, we'll see that we have an error function that's using string interpolation. This is just the minified version of our getGreeting function. It's being called N here. E is what we call name in our source code, but the string interpolation is still happening, and our function call is happening with our console log.
[02:30] I'm going to drop into the terminal and install a few more dev dependencies. We use npm i -D to install these as dev dependencies. We're going to have three items. We're going to have @babel/core. We're also going to have babel-cli. We're going to have a preset which is called preset-env, and we'll press Enter to install those. With those installed, let's take a look at how Babel works.
[03:06] Babel-cli will put an executable in that node_modules/.bin directory. We could run it like this. We can do node_module/.bin/babel. The other way we could do this is we can use the shorthand. We can use $(). Inside the parentheses, we can type npm bin/ and npm bin will just expand to node_modules.bin.
[03:35] Now we can run Babel and one of the arguments that we're going to pass in the Babel is going to be a source file. In this case, we're going to do source/greet.js and we'll hit that in.
[03:50] We'll see that it essentially gives us exactly what we gave it. We passed in source greet.js and it spit back out the same exact code. It still has the error function, still has the string interpolation, still has our export default.
[04:04] Let's try this one more time, but this time we're going to pass a second argument. We're going to give it the presets flag. We're going to set that to equal that preset that we installed as part of our dependencies or babel-preset-env.
[04:22] This output is very different from our input. We'll see that it's added use struct at the top here. We have this object defined property entry here. This lets importing modules. Note that this is a transpiled ES modules. We don't want to worry too much about this, but the important part here is that it's taken that arrow function that use string interpolation.
When I run the above command .... I get below error '$' is not recognized as an internal or external command, operable program or batch file. I already installed below stuff npm i -D @babel/core @babel/cli @babel/preset-env....Please advice
There's a typo in the transcript: