As per usual, I was frantically trying to make a cool blog post on some topic I hardly have any qualifications to give (this time it was making a blockchain in javascript), I came across the frustrations of coding javascript with the lovely ES6 syntax, only to be thwarted by error messages in my node console:
(function (exports, require, module, __filename, __dirname) { import SHA256 from ‘crypto-js/sha256’ ^^^^^^SyntaxError: Unexpected identifier at new Script (vm.js:84:7) at createScript (vm.js:264:10)
What?s happening? The syntax is correct, why won?t the modules load?
The problem is, while Node.js supports many of the latest EMCAscript updates, it does not support ALL of them ? relevant to the issue above is Import/export statements.
import Module, {function} from ‘module’export default class Thing {}
Neither of the above or several of the variations are available to use with Node, as it?s not natively supported. Therefore If you?re trying to run a small blockchain in a Node.js console like I was, you?re going to have a bad time.
Introducing Babel
By now, if you?ve faced this problem before, have been using ES6+ syntax, or have been scouring the web for solutions to this seemingly minuscule problem you may have come across the javascript compiler Babel.
Babel takes our written ES6 code in javascript and converts it into a readable version of javascript that almost all browsers and environments can understand (pre 2015 JS).
Setup
First, in your open project, you?re going to want to initialize your project, and create a package.json file by running of the following two commands in your project directory.
npm init // npm int
Packages
Node modules can be included in a javascript project once a package.json file has been created. Next we must install babel locally to our project with the command:
npm install –save-dev @babel/core @babel/cli @babel/preset-env @babel/node
Babel modules are published as separate npm modules, following modular design which are each designed for specific cases. @babel/core holds the core functionality for babel, while @babel/cli contains tools that allows us to use babel within the terminal. @babel/preset-env is a preset module that allows one to use the latest JavaScript syntax without needing to specify which transformations are needed by the environment. @babel/node is a command-line-interact that works similar to the Node.js CLI, with the added benefit of compiling JS code with babel presets before the code is ran.
Next, we need to tell babel how we want it to compile our files. Remember installing @babel/preset-env? In our root, we create a file called .babelrc and add the following object:
// in .babelrc{ “presets”: [ “@babel/preset-env” ] }
Once you?ve done this, you?re ready to use ES6 in node!
Extra Credit
So you want more eh??
What if you could get your js file to run immediately on update?
Nodemon
Nodemon automatically restarts node when file changes are detected in a directory. It replaces the word node when executing a script.
npm install –save-dev nodemon
So how do we couple this with babel? Open your package.json file, and in your ?scripts?, add the key ?start? with:
“start” : “nodemon –exec babel-node index.js”
Finally, run npm start, and you?re ready to code in modern javascript!
