How to import "old " ES5 code in ES6

Importing ES5 code into ES6 primarily involves using the CommonJS module specification, as ES5 lacks a native module system. In ES6, we can leverage the new module system with import and export statements. To ensure ES5 code is compatible and usable in an ES6 environment, we can adopt several approaches. Below are the specific steps and examples:

Step 1: Determine if the ES5 code is implemented as a CommonJS module

Check if the ES5 code uses syntax similar to module.exports or exports.someFunction. This is the standard practice for CommonJS modules.

Example:

javascript
function add(x, y) {
  return x + y;
}

module.exports = {
  add: add
};

Step 2: Import the ES5 module in ES6 code

Use ES6's import syntax to import CommonJS modules. Most modern JavaScript environments and build tools (such as Webpack or Babel) support this approach.

Example:

javascript
// ES6 module code
import { add } from './mathUtils.js';

console.log(add(5, 3)); // Output: 8

Step 3: Use build tools or transpilers

If your environment (e.g., browser) does not natively support CommonJS modules, you may need build tools (e.g., Webpack) or transpilers (e.g., Babel) to transpile the code.

• Webpack: Bundles CommonJS modules into a single file for browser deployment.
• Babel: Uses presets (e.g., @babel/preset-env) to transpile ES6 code to ES5, including module syntax conversion.

Webpack configuration example:

javascript
// webpack.config.js
const path = require('path');

module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development'
};

In this configuration, app.js serves as your ES6 entry point, and Webpack processes all import statements to bundle them into dist/bundle.js.

Conclusion

By following these steps, you can effectively integrate ES5 code into ES6 projects. This not only facilitates code reuse but also enables gradual modernization of legacy codebases to contemporary JavaScript standards.