Maria D. Campbell

Implementing ES6 Modules Without Webpack or Babel

ES6 Modules have been around since ECMAScript 2015 (aka ES2015, ES6). When they were first introduced, we transpiled them somehow to ES5 via creation of a single bundle.js file. This was usually done with npm module bundling tools such as Browserify or Webpack.

ES6 modules have been fully supported in Chrome since version 65. So why do we still get errors if we try and use the import/export keywords to import or export modules in JavaScript files?

Even though ES6 modules ARE fully supported in Chrome, we still have to tweak our code just a tad to make it work 100%. For small projects or “playgrounds” in which we don’t want to bother setting up Webpack configurations and using Babel to transpile our code from ES6 to ES5, for example, it’s way easier and faster than configuring Webpack or Browserify. Bear in mind, however, that it is still best practice for the time being to use module bundlers such as Webpack or Browserify along with transpilers such as Babel for production. Not all browsers behave the same or provide the same level of support!

So what do we have to do to make ES6 modules work without Webpack/Browserify/Babel? It’s very simple, really. In your index.html file:

<script type="module" src="ES6-Node.js"></script>

Note type="module".

Then in the JavaScript file itself:

import * as area from './calcArea.js'
import Book from './Book.js'

Normally, when using tools such as Webpack and Babel, there is no need to add the .js extension. However, when those tools are not present, it IS necessary to add .js. Otherwise, the browser will not acknowledge the existence of imported files. These tweaks also permit the use of the export keyword as well. Nifty, right?

Happy import/export without Webpack or Babel!

Related Resources:

Categorized under:web-developmentjavascriptweb-development-workflows
Discuss On Twitter