Convert CommonJS Requires to ES6 Imports

[00:01] With recent advancements in bundling and tree shaking, there are now disadvantages to still using the required syntax of CommonJS. To take advantage of some of these new features, we need to switch over our requires, to use imports.

[00:16] However, converting over a large code base could be very tedious. There are many utilities that have been released on NPM and make this much easier. One such is cjs-to-es6. We'll start by running npm install-gcjs-to-es6.

[00:34] Now that that's complete, let's take a look at some of the examples that we'll be converting. The first one looks like this. Some of these are just regular requires that will be turned into imports. Some of these are named imports.

[00:58] Others are also named imports, but will receive a different name, and then another is just regular import. However, this only matters if the other things are also being exported correctly. For example, here we have a module exports of add and subtract, but we're exporting an object. This will be an issue later.

[01:18] Date is pretty simple. We just have a module exports with a convert date. We're exporting this function. Our app is taking advantage of two things, a module exports and an exports with a named variable. We'll convert this over, using cjs-to-es6. We'll type cjs-to-es6.

[01:41] You need to provide the path to look for. In our case, you would use ./. However, if you wanted to convert a single file, you could type something like index.js, or if you had a specific folder that you wanted to look for, you could type something like lib or whatever folder you are looking for.

[01:58] Type ./, and it will run through and switch everything over. Let's take a look at what it did. This was converted correctly. We have a named export and we're now still exporting it as small header. We had our export default MyComponent, so that works great.

[02:19] This got switched over to an export default. These imports were imported correctly, had React App. Add was imported from util. Subtract was then imported as other subtract and our date was imported correctly.

[02:34] However, if we take a look at util.js, this is exporting a default object. This is going to cause problems with the import here, because this is actually going to import it as a named import. If we go ahead and clear all of our changes. If we had switched this to exports.add=add and exports.subtract=subtract.

[03:06] Now we can rerun this, however, we'll just target our util.js file. This will switch it over to export in the appropriate syntax, exporting as named variables, rather than exporting default as an object.

[03:27] One other thing to note is that all imports in ES6 must be static. However, with CommonJS, you could do something like if true and require something dynamically. This is not allowed in ES6 and must be declared at the top of the file, if you're doing an import.

[03:49] If you were to then go run cjs-to-es6 on util again, nothing would happen. You would need to convert this and pull in const date up here. If we remove this, and then reran it, it would get converted to import date as you expect.