Blog of Raivo Laanemets

Stories about web development, freelancing and personal computers.

Working with ES5 and ES6 projects at the same time

ECMAScript 6 (ES6) was officially published a year ago but there is no native runtime that fully supports it. A year ago I wrote a small article on it but I have not yet started using it on most my projects over various tooling and runtime compatibility issues.

Some time ago I started working on a client project which had ES6 as one of the techical requirements. Our target runtime is Node.js version 6 but we still need to use the Babel transpiler to get support for ES6 modules. The modules are in a sad state as only the import/export syntax was specified in the standard but not the module loading process (the loader spec). The implementation details for Node.js and npm are currently open.

The setup has worked quite well for the project but has created an additional issue for me: language context switching. ES5 and ES6 are both JavaScript but are rather different if you want to utilise ES6 to its fullest (let, const, classes, destruction, arrow functions, modules). I still have to maintain a number of projects targeting older runtimes, sometimes in cooperation with other developers who do not want to hear anything about transpilers or anything else that breaks the simple edit/refresh workflow.

This has made us to use ESLint to avoid the accidental use of ES6 on older projects and to enforce ES6 where it can be used (prefer const/let etc.). ESLint is quite configurable. It now replaces jshint, a similar tool I used previously. ESLint is configured using a project-local .eslintrc file (see the full documentation). The example file for ES5 support is:

  "parserOptions": {
    "ecmaVersion": 5,
    "sourceType": "script"
  // ... other entries

This will prevent the accidental usage of the new syntax in ES5 projects. For ES6, the ecmaVersion value has to be changed to 6 and the sourceType value to module (it is also possible to use ES6 without modules). In the actual ES6 project above we used additional check rules for ESLint. Most of them can be found in the canonical configuration project.

I still have some mixed feelings about ES6 due to lack of runtime support and I avoid ES6 syntax on projects whenever possible. I have been using Promises (a standardized object in ES6, shims available in older versions, the best productivity boost in ES6 in my opinion) a long time and I see that the language constructs like const and let help to communicate the intent of code. However, I do not see transpilers like Babel a good long-term solution and hope that the need for them goes away one day.


No comments have been added so far.

Email is not displayed anywhere.
URLs (max 3) starting with http:// or https:// can be used. Use @Name to mention someone.