or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

ast-types.md browser.md cli.md index.md modules.md registration.md transformation.md transformers.md

tile.json

Module Formats

Support for different JavaScript module systems as output targets. 6to5 can transform ES6 import/export statements into various module formats for compatibility with different environments and bundlers.

Module Formatters

/**
 * Available module formatters
 */
const moduleFormatters: {
  common: ModuleFormatter;         // CommonJS
  "common-standard": ModuleFormatter; // CommonJS standard mode
  "common-strict": ModuleFormatter;   // CommonJS with strict mode
  amd: ModuleFormatter;            // AMD (Asynchronous Module Definition)
  "amd-strict": ModuleFormatter;   // AMD with strict mode
  umd: ModuleFormatter;            // UMD (Universal Module Definition)
  "umd-strict": ModuleFormatter;   // UMD with strict mode
  system: ModuleFormatter;         // SystemJS
  ignore: ModuleFormatter;         // No module transformation
};

interface ModuleFormatter {
  /**
   * Transform import/export statements
   */
  transform(ast: Node, file: File): void;
  
  /**
   * Formatter metadata
   */
  metadata: {
    name: string;
    strict?: boolean;
  };
}

CommonJS Format

The default module format, compatible with Node.js and many bundlers.

Input (ES6 Modules)

// math.js
export const PI = 3.14159;
export function add(a, b) {
  return a + b;
}
export default class Calculator {
  multiply(a, b) {
    return a * b;
  }
}

// app.js
import Calculator, { PI, add } from './math';
import * as mathUtils from './math';

const calc = new Calculator();
console.log(calc.multiply(PI, 2));

Output (CommonJS)

// math.js
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PI = 3.14159;

function add(a, b) {
  return a + b;
}
exports.add = add;

var Calculator = function Calculator() {
  // ...
};
Calculator.prototype.multiply = function multiply(a, b) {
  return a * b;
};

exports.default = Calculator;
module.exports = exports.default;

// app.js
"use strict";

var _math = require('./math');
var _math2 = _interopRequireDefault(_math);
var mathUtils = _interopRequireWildcard(_math);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { /* ... */ }

var calc = new _math2.default();
console.log(calc.multiply(_math.PI, 2));

AMD Format

Asynchronous Module Definition, compatible with RequireJS and other AMD loaders.

Output (AMD)

// math.js
define(["exports"], function (exports) {
  "use strict";

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  
  var PI = 3.14159;
  exports.PI = PI;
  
  function add(a, b) {
    return a + b;
  }
  exports.add = add;
  
  var Calculator = function Calculator() {
    // ...
  };
  
  exports.default = Calculator;
});

// app.js
define(["./math"], function (_math) {
  "use strict";

  var _math2 = _interopRequireDefault(_math);
  
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  
  var calc = new _math2.default();
  console.log(calc.multiply(_math.PI, 2));
});

UMD Format

Universal Module Definition, compatible with CommonJS, AMD, and global variables.

Output (UMD)

// math.js
(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(["exports"], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports);
  } else {
    var mod = {
      exports: {}
    };
    factory(mod.exports);
    global.math = mod.exports;
  }
})(this, function (exports) {
  "use strict";

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  
  var PI = 3.14159;
  exports.PI = PI;
  
  function add(a, b) {
    return a + b;
  }
  exports.add = add;
  
  var Calculator = function Calculator() {
    // ...
  };
  
  exports.default = Calculator;
});

SystemJS Format

SystemJS dynamic module loader format.

Output (SystemJS)

// math.js
System.register([], function (_export) {
  "use strict";

  var PI, Calculator;
  
  function add(a, b) {
    return a + b;
  }
  
  return {
    setters: [],
    execute: function () {
      PI = 3.14159;
      _export("PI", PI);
      _export("add", add);
      
      Calculator = function Calculator() {
        // ...
      };
      
      _export("default", Calculator);
    }
  };
});

// app.js
System.register(["./math"], function (_export) {
  "use strict";

  var Calculator, PI, add, calc;
  
  return {
    setters: [function (_math) {
      Calculator = _math.default;
      PI = _math.PI;
      add = _math.add;
    }],
    execute: function () {
      calc = new Calculator();
      console.log(calc.multiply(PI, 2));
    }
  };
});

Ignore Format

No module transformation - leaves import/export statements as-is.

Output (Ignore)

// Keeps original ES6 module syntax
export const PI = 3.14159;
export function add(a, b) {
  return a + b;
}
export default class Calculator {
  multiply(a, b) {
    return a * b;
  }
}

import Calculator, { PI, add } from './math';

Strict Mode Variants

All module formats have strict mode variants that ensure "use strict" directive:

// common-strict, amd-strict, umd-strict
"use strict";

// ... rest of module code

Usage Examples

CLI Usage

# CommonJS (default)
6to5 src --out-dir lib --modules common

# AMD
6to5 src --out-dir lib --modules amd

# UMD
6to5 src --out-dir lib --modules umd

# SystemJS
6to5 src --out-dir lib --modules system

# No transformation
6to5 src --out-dir lib --modules ignore

Programmatic Usage

const to5 = require("6to5");

// Transform to CommonJS
const commonResult = to5.transform(code, {
  modules: "common"
});

// Transform to AMD
const amdResult = to5.transform(code, {
  modules: "amd"
});

// Transform to UMD
const umdResult = to5.transform(code, {
  modules: "umd"
});

// Transform to SystemJS
const systemResult = to5.transform(code, {
  modules: "system"
});

// No module transformation
const esResult = to5.transform(code, {
  modules: "ignore"
});

Build System Integration

// Webpack
module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: "6to5-loader",
        query: {
          modules: "common" // or "amd", "umd", etc.
        }
      }
    ]
  }
};

// Browserify
browserify()
  .transform("6to5ify", {
    modules: "common"
  })
  .bundle();

// Gulp
gulp.src("src/**/*.js")
  .pipe(to5({
    modules: "amd"
  }))
  .pipe(gulp.dest("dist"));

Environment-Specific Builds

// Build script for multiple targets
const to5 = require("6to5");
const fs = require("fs");

const sourceCode = fs.readFileSync("src/library.js", "utf8");

// Node.js build (CommonJS)
const nodeResult = to5.transform(sourceCode, {
  modules: "common",
  runtime: true
});
fs.writeFileSync("dist/library.node.js", nodeResult.code);

// Browser build (UMD)
const browserResult = to5.transform(sourceCode, {
  modules: "umd",
  runtime: true
});
fs.writeFileSync("dist/library.browser.js", browserResult.code);

// AMD build for RequireJS
const amdResult = to5.transform(sourceCode, {
  modules: "amd"
});
fs.writeFileSync("dist/library.amd.js", amdResult.code);

Module Interoperability

// Handling default exports across formats
const to5 = require("6to5");

const moduleCode = `
export default function myFunction() {
  return "Hello World";
}
`;

// CommonJS - creates exports.default and module.exports
const commonResult = to5.transform(moduleCode, { modules: "common" });
// Usage: const fn = require('./module'); // or require('./module').default

// UMD - handles all module systems
const umdResult = to5.transform(moduleCode, { modules: "umd" });
// Usage: AMD: define(['module'], fn => fn.default())
//        CommonJS: require('./module').default()
//        Global: window.moduleName.default()

Complex Module Scenarios

// Mixed import/export patterns
const complexModule = `
import { util1, util2 } from './utils';
import defaultUtil from './default-util';
import * as allUtils from './all-utils';

export const config = { version: '1.0.0' };
export { util1 as renamedUtil };
export default class MyClass {
  constructor() {
    this.utils = allUtils;
    this.defaultUtil = defaultUtil;
  }
}
`;

// Transform for different environments
const formats = ['common', 'amd', 'umd', 'system'];

formats.forEach(format => {
  const result = to5.transform(complexModule, {
    modules: format,
    moduleIds: true // Add module IDs for debugging
  });
  
  console.log(`=== ${format.toUpperCase()} ===`);
  console.log(result.code);
  console.log('');
});

Module Loading Strategies

// Conditional module loading based on environment
const getModuleFormat = () => {
  if (typeof module !== 'undefined' && module.exports) {
    return 'common'; // Node.js/CommonJS
  } else if (typeof define === 'function' && define.amd) {
    return 'amd'; // AMD/RequireJS
  } else {
    return 'umd'; // Browser global
  }
};

// Transform code based on detected environment
const appropriateFormat = getModuleFormat();
const result = to5.transform(sourceCode, {
  modules: appropriateFormat
});