Use babel-preset-env with Native Node Features and Also Use Babel Plugins

Jason Brown
InstructorJason Brown
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 6 years ago

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.

Blaine
Blaine
~ 7 years ago

Warning to those watching this lesson: At least a couple main bullet points of this video are incorrect. Don't let this video confuse you!

  1. babel-preset-node removes the need to pick a specific version of ECMAScript to compile to. This makes the inclusion of the babel-preset-es2015 module unnecessary.

  2. The babel-preset-node feature of selecting the target as node: current does not mean Babel will target the stable NodeJS version but instead will target the version of node currently running.

It is disappointing to see such little research done for a guide on such a quality website. Hope this is resolved, I love the site as a whole!

Jason Brown
Jason Browninstructor
~ 7 years ago
  1. Sorry, I wasn't intending to mislead people and should have touched on it being unnecessary. I have a default .babelrc template that I use so I was just playing w/ babel-preset-env for a project and figured I'd make a screencast. So I had it installed and the code evolved when I attempted using babel-preset-env after the fact.
  2. You are right here, I completely misspoke. I was thinking of "stable" while making this video rather than "current" aka (process.version.node). I was attempting to get across the fact that if your node environment is different than your production (it shouldn't be but in some cases people can't control their node versions in prod) that you should be careful as the node value you set may not work correctly if a build is done locally and pushed to a server using a different node.

I'll rerecord tomorrow and take care of the the comment about the node:current bit and remove the installation of the es2015 piece. Hopefully this once instance doesn't make you question the site.

Blaine
Blaine
~ 7 years ago

Thank you thank you. It's good to hear that the video will be updated. Best of luck.

Jason Brown
Jason Browninstructor
~ 7 years ago

The video should be updated as of right now, in the middle I remove the es2015 bit and additionally talk about node: "current". Thank you for catching my errors.

Markdown supported.
Become a member to join the discussionEnroll Today