javascript - Convert existing legacy library to es6 module - Stack Overflow

admin管理员组

文章数量:1410737

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.

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.

• javascript
• module
• ecmascript-6
• legacy

Share Improve this question Follow edited May 23, 2017 at 12:34 CommunityBot 111 silver badge asked Mar 29, 2017 at 23:50 backspacesbackspaces 3,96277 gold badges3838 silver badges6262 bronze badges 6

• 4 See github./nolanlawson/cjs-to-es6 for example. Of course, you may need some manual work on wrapper, due to fundamental differences between ES6 modules and other modules. I wonder which 'modern browsers' you mean. – Estus Flask Commented Mar 30, 2017 at 0:33
• Thanks, this may be perfect for all npm based projects .. that'd be cool! Re: browsers: caniuse./#feat=es6-module .. FFox, Safari Tech Preview, Edge all are supporting modules, generally w/ flags. I've used STP and its great! – backspaces Commented Mar 30, 2017 at 16:24
• Certainly not for all - just because of how modules work. CJS modules are dynamic by nature, conditional requires are everywhere. ES6 modules are static. Usually you may want to map CJS export to ES6 * import, but it is not always possible. I wouldn't expect it in Chrome any time soon. ES6 modules look like a very long shot, it may take years before they will be usable in production. They may be fun to play with, but I cannot remend to get rid of Webpack for a real project, consider SystemJS instead if you really want to skip a building step. – Estus Flask Commented Mar 30, 2017 at 17:04
• I hear you brother! TC39 & Whatwg just could not pair. We're left with the dirt. Our grandkids will talk about "do you remember es6 modules? weird!" – backspaces Commented Mar 31, 2017 at 2:16
• Hah, that's true, reminds me of xkcd./927 all the times. I wouldn't refer to build tools as 'dirt'. Generally a real-world project benefits a lot from Webpack even with native modules available - css/scss loaders, minifier and other plugins... – Estus Flask Commented Mar 31, 2017 at 11:58

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 2

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 monjs 
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 monjs 
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...

本文标签： javascriptConvert existing legacy library to es6 moduleStack Overflow