Use babel-preset-env with Native Node Features and Also Use Babel Plugins
In this lesson we'll show how to setup a .babelrc file with presets and plugins. Then create npm scripts that use babel-node and babel. With babel-preset-env we'll show how to target specific versions of node and how to use babel plugins, while not transpiling features (like async await) that are already supported by node natively.
[00:00] Node is getting support from many ES6 features. However, there may be other Babble plugins and other presets like React and other ES2015, like module imports, that you might want to take advantage of.
[00:12] What we'll first do is install Babel CLI, Babel Preset M, Babel Preset ES2015 -- which is ES6, Babel Preset React, and Babel plugin transform object rest spread. These are just examples of plugins and presets that we can use with Node.
[00:34] Now that we have all of that installed, let's take a look at some code that we can compile with Babble. We have a source directory with an index.js. We have async function that's called load data that receives a username that we call here.
[00:48] We'll show that we console log. We'll use Axios to make HTTP requests to the GitHub API to get some user information. Then we'll just log out some basic information. Now we'll set up our Babel configuration. We'll create a file called Babel RC. Inside of here will be an object, and we have two types of options. We have presets and we have plugins.
[01:13] First will be our presets which include React, ES2015 as well as our EMV preset. We also have a plugin. That is the plugin trans for object rest spread, however we'll just reference it with a transform object rest spread. Now, this will allow us to run a Babel Node. It will then start up our server as well as we could also compile to a static file.
[01:49] Now, I'll go into our package.json. In our scripts, we'll add two scripts, our start. We'll run Babble Node source/index.js because that's where our index.js is. This will just run Babel with our Babel RC configuration.
[02:08] If you want to output the files, we can create a build which will then just run Babel. We'll provide it files to look for, and that'll just be anything in our source directory. Then we'll say output to a dist folder. Now, if we go and run npm run build, we'll see that a dist directory is created. I can see that our code has been compiled.
[02:36] We went from source, where we import and all this async information, to a compiled dist function with requires. In Node 7.6, async await was supported by default. What we want to do is use the platform and the native features inside of Node rather than using Babel to compile compatible code.
[03:03] What we'll need to do is go to our Babel RC. Instead of EMV here, we'll add this as an array. Inside here, the second piece of the array will be an object of configuration. We'll then say targets. We'll then say node because we're using node. Then we can provide a compatibility version. This will then only compile features that are not supported by Node.
[03:31] In this case, we could say 7.6, and it will only compile features that Node 7.6 does not support. One other thing to note is that Babel preset M ships with all the plugins and polyfills that it needs to support the targeted versions of Node and other things that are supported by ECMA script standards.
[03:53] That means that shipping and installing anything like ES2015 or other standard ECMA script plugins is completely unnecessary. If your configuration includes like ES2015, you can go ahead and remove it.
[04:07] However, if you're using other features on the server, like using React for server side rendering, you will still need to include those particular presets or plugins because they are not ECMA script standards.
[04:19] Another feature of Babel preset EMV is that, rather than specifying a specific Node version like we have done here with 7.6, we can say current, and it will target the current Node version running.
[04:33] Now that we have this configured, if we go back to our terminal and type npm run build, and then go open our index and our dist, we can see that no longer is the async and await transpiled. We can just see that it leaves it as is and allows us to use the features that are inside of Node by standard.
[04:56] Now if we switch back to our terminal again and type npm start, this will run our start configuration which is the Babel-node source/index.js. This way it will not update or output anything to the dist, but it will just run the command with our configuration applied. We can see that. Loading data, we've made the call and output our information.