I have been developing a site using babel-node and browserify with the babelify transform, to support ES6 syntax.
I am just wondering, can I run this in production as babel-node server
rather than node server
What other options do I have to run ES6 in node?
Here are the commands I am running for build and start in development
// npm run build browserify -t [babelify] client.js > public/js/bundle.js", // npm start babel-node server.js"
Here are my dev dependencies
"babel": "^4.0.1", "babelify": "^5.0.3", "browserify": "^8.0.3"
If you've been active as a Node. js developer, or even dabbled in front-end libraries like React or Vue. js, then there's no doubt that you've likely run across Babel.
In 2020, frontend developers are still wasting a lot of time with excessive tooling. Babel is seen by some as a necessity, but I aim to show you that it's not. By the end of this article, you will know: How to confirm which browsers actually need supporting on a case-by-case basis.
A common reason Babel is frequently involved in the build process for Node webapps is that Babel allows us to easily compile ES6 code to older versions (usually ES5), because it has better browser support. For a purely server-side app, there is no reason, other than maybe slight performance gains, to compile to ES5.
For the client side code, you're doing the correct thing. babelify
it and ship it to the client.
For the server side code, I would just do a regular build using babel-cli
According to http://babeljs.io/docs/setup/#babel_register,
babel-register
is not meant for production use — The require hook is primarily recommended for simple cases.
for Babel 6+
As of Babel 6, no transformations are included by default. So let's start by installing babel-cli
and babel-preset-es2015
.
$ npm install --save-dev babel-cli babel-preset-es2015
Add a transformation to your .babelrc
file — this is the prest module we downloaded above. Take a look at the full list of presets to see which one(s) are a best fit for you.
{ "presets": ["es2015"] }
Add a build
script to your package.json
. Below src
is your input files and build
is the transformed output files
"scripts": { "build": "babel src -d build" }
Then build it!
$ npm run build
Then run your code. At this point, you'll want to be executing the files in your build
directory
$ npm start
for Babel <= 5, just use the require hook.
require("babel/register");
All subsequent files required by node with the extensions .es6, .es, .jsx and .js will be transformed by Babel. The polyfill is also automatically required.
You will be able to keep your source files in ES6 but still execute them using node server.js
According to your comments, you seem to be having a little trouble. Pay particular attention to the yellow highlighted part above. Your first file can only be ES5, which is run by node itself. All subsequent requires will be transformed by Babel...
Here's what a typical setup might look like
server.js
// only ES5 is allowed in this file require("babel/register"); // other babel configuration, if necessary // load your app var app = require("./app.js");
app.js
// this file will be loaded through babel // you can now use ES6 here and in every other include
fire it up!
$ node server.js
I just wrote a blog post on this topic
Babeljs CLI documentation warns the following:
babel-node not meant for production use
You should not be using babel-node in production. It is unnecessarily heavy, with high memory usage due to the cache being stored in memory. You will also always experience a startup performance penalty as the entire app needs to be compiled on the fly.
This is an example of how you could set up the npm scripts to run your app with node instead of babel-node.
"scripts": { "clean": "rm -rf build && mkdir build", "build-css": "node-sass scss/app.scss public/css/app.css", "build-server": "babel -d ./build ./server -s", "build": "npm run clean && npm run build-css && npm run build-server", "lint": "eslint source/ --quiet", "start": "node ./build/index.js", "debug": "node --debug ./build/index.js", "test": "for i in $(ls tests/); do babel-node \"./tests/${i}\" | faucet ; done", "validate": "npm run lint; npm run test && npm outdated --depth 0" },
You can find more details on the blog post
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With