Convert existing legacy library to es6 module

Question

Note: this is a continuation of: Convert old JavaScript code into ES6 module .. which resolved the OPs problem but did not provide an answer.

All modern browsers now include native es6 modules (except for chrome which will land shortly we hope). The question is how to convert existing libraries to es6 modules using this native support.

This is for current projects that use no transpiling (webpack, babel, system.js, etc) for their own use, but have dependencies on legacy code.

Do any of the existing workflow tools have support for converting/wrapping older libraries to be es6 importable? I'd really like to avoid using <script> tags in the page's html.

Answer 1

You can use Lebab to batch convert files from es5 to es6.

Lebab transpiles your ES5 code to ES6/ES7.

It does exactly the opposite of what Babel does.

The site was broken but I found the sourcecode for their website and redeployed it from a fork so that you could see what it does before you apply it to potentially important files...

#DEMO

Install

Install it using npm:

$ npm install -g lebab

Usage

Convert your old-fashioned code using the lebab cli tool, enabling a specific transformation:

$ lebab es5.js -o es6.js --transform let

Or transform an entire directory of files in-place:

# .js files only
$ lebab --replace src/js/ --transform arrow
# For other file extensions, use explicit globbing
$ lebab --replace 'src/js/**/*.jsx' --transform arrow

My personal workflow is as follows

npm i lebab -g

safe:

 lebab --replace ./ --transform arrow
 lebab --replace ./ --transform arrow-return
 lebab --replace ./ --transform for-of
 lebab --replace ./ --transform for-each
 lebab --replace ./ --transform arg-rest
 lebab --replace ./ --transform arg-spread
 lebab --replace ./ --transform obj-method
 lebab --replace ./ --transform obj-shorthand
 lebab --replace ./ --transform multi-var

ALL:

lebab --replace ./ --transform obj-method
lebab --replace ./ --transform class
lebab --replace ./ --transform arrow
lebab --replace ./ --transform let
lebab --replace ./ --transform arg-spread
lebab --replace ./ --transform arg-rest
lebab --replace ./ --transform for-each
lebab --replace ./ --transform for-of
lebab --replace ./ --transform commonjs 
lebab --replace ./ --transform exponent
lebab --replace ./ --transform multi-var
lebab --replace ./ --transform template
lebab --replace ./ --transform default-param
lebab --replace ./ --transform  destruct-param 
lebab --replace ./ --transform includes
lebab --replace ./ --transform obj-method
lebab --replace ./ --transform class
lebab --replace ./ --transform arrow
lebab --replace ./ --transform arg-spread
lebab --replace ./ --transform arg-rest
lebab --replace ./ --transform for-each
lebab --replace ./ --transform for-of
lebab --replace ./ --transform commonjs 
lebab --replace ./ --transform exponent
lebab --replace ./ --transform multi-var
lebab --replace ./ --transform template
lebab --replace ./ --transform default-param
lebab --replace ./ --transform  destruct-param 
lebab --replace ./ --transform includes

Alternatively I use the vscode es5 to es6 converter plugin...