I really want to use ES6 in my web project. Why? Because I want my career to stay current and well ES6 is the bees knees! Like what? Well there is the keyword for starters. Let Big Chiwawa Ok what about now that is cool. destructuring (Post Google Search) Ok I’ll give you that is cool. Also The list goes on and on … Default Args, Shorthand Properties, Computed Properties, Spread Operator, String Templates, Block Scoping. And import modules? Err not quite. You’ll still need Babel for that! (Annoyed at the thought of researching how to set this up) (Seeing furrowed brow) Don’t panic all the info you need is here. Yay Remove IntelliJ Red Marks I hate red marks. But I love linting. This is highlighted as red because the current version of Javascript for the project is not set to ES6. Head to Preferences -> Languages and Frameworks -> Javascript And select ES6! Yay Red is gone! So is that all I need to do? One would think but as you know JS is in a state of flux and not all features are available in all environments. I knew this wouldn’t be easy. What works where? Take a look at this . It gives a great overview of ES6 support across, browsers, polyfills, servers and mobile. compatibility table Oh great can you just give me the tl;dr; Well many commands are available natively but professional Software Engineers like good build tools and organised code. So in order to use Module Loading via ES6 import statements most developers use a transpile — Let’s try . Babel The import math module example Let’s assume we have a Math module which performs the addition task guess what this sums two numbers. sumTwo(number1, number2) ok that’s nice But as part of a larger program this is located in the file lib/addition.js It would be nice to see the whole file contents. sumTwo(number1, number2){ a + b;} function return { sumTwo } export Then we want to use this function in a file called main.js 'use strict'; { sumTwo } 'lib/addition'; import from console.log("2 + 3 = ",sumTwo(2,3) // 5); If you run this in Node you will see this: Genes-MacBook-Pro-2:javascriptzzzzzzzz thinkjones$ node -vv7.0.0Genes-MacBook-Pro-2:javascriptzzzzzzzz thinkjones$ node articles/using_es6/main.js/Users/thinkjones/dev/javascriptzzzzzzzz/articles/using_es6/main.js:3import { sumTwo } from 'lib/addition';^^^^^^SyntaxError: Unexpected token importat Object.exports.runInThisContext (vm.js:76:16)at Module._compile (module.js:545:28)at Object.Module._extensions..js (module.js:582:10)at Module.load (module.js:490:32)at tryModuleLoad (module.js:449:12)at Function.Module._load (module.js:441:3)at Module.runMain (module.js:607:10)at run (bootstrap_node.js:382:7)at startup (bootstrap_node.js:137:9)at bootstrap_node.js:497:3Genes-MacBook-Pro-2:javascriptzzzzzzzz thinkjones$ As far as I am aware is not supported and is still under heavy discussion. That’s why there are so many polyfill and transpiler libraries. To help with this intermediate phase the JS ecosystem. import So great how can I get this to work. Let’s try seems to be popular. From front page docs “Start by installing the Babel CLI and a preset”: Babel npm install --save-dev babel-cli babel-preset-env Then “Create a .babelrc file in your project (or use your package.json)” { "presets": ["env"]} WTF is that? Well it’s a mechanism to take into account the target environment you are aiming for. Since Different products and versions of products support different ES6 systems natively you can optimise this by specifying your target environment. Sounds complicated should I give a f***? Not sure. I think for this example we will go with the default and investigate if we find issues. Do you work for a startup? Yes I love how scrappy you are. K lets try running it again Ahhh! SyntaxError: Unexpected token import” node main.js See… So Babel doesn’t actually do anything you need to compile or rather transpile the code into an ES5 format that the target environment understands. Yeah yeah — so how do I do that? Well I am glad you asked. Babel has an awesome setup page where you select your build tools and get the necessary info — Babel Setup Page Link Let’s use the Babel CLI Install CLI Locally npm install --save-dev babel-cli Then trans-pile: ./node_modules/.bin/babel ./src --experimental --source-maps-inline -d ./dist Way what’s this src directory? Yeah when I started the article I had all my files in root, but then after playing with Babel and realised it was going to produce a bunch of output files I decided to use a different directory. src and dest Sounds good — So what do we have now? Here you go — two directories one with the src and another with the dist files. Yeah all well an good but does the program now run? Yeah it should. Yeah are you sure? No let’s try it in Node. node dist/main.jsmodule.js:474throw err;^ Error: Cannot find module 'lib/addition' DAMMMIT! Investigating Relative Files References So this is down to my limited Node knowledge but it depends on how relative file references are specified. My file was located at and I was running node from . So I think the import is relative to the node running directory when specified like this: main.js /src/main.js / { sumTwo } 'lib/addition'; import from So when it was running it wasn’t working, because it was expecting the file in and not /lib/addition.js /dist/lib/addition.js. To fix this I had to change the original import statement to be relative to the current directory. So changing it to: { sumTwo } './lib/addition'; import from Then re-running Babel compile by: ./node_modules/.bin/babel ./src --experimental --source-maps-inline -d ./dist Gives me the correct transpiled code: 'use strict'; _addition = require('./lib/addition'); var console.log("2 + 3 = ", (0, _addition.sumTwo)(2, 3) // 5); Which then runs when I call this command from the root directory: node ./dist/main2 + 3 = 5 YAY! All well and good where is the code? Here at my github — thinkjones
