将现有的旧版库转换为ES6模块

Question

将现有的旧版库转换为ES6模块

javascriptmoduleecmascript-6legacy

16

注意：这是一个继续讨论的问题：将旧的JavaScript代码转换为ES6模块...它解决了OP的问题，但没有提供答案。

现代浏览器都包含本地的ES6模块（除了Chrome，我们希望它很快也能支持）。问题是如何利用这个本地支持将现有的库转换为ES6模块。

这适用于当前项目中不使用任何转译工具（如webpack、babel、system.js等）的情况，但有对旧代码的依赖。

是否有现成的工作流程工具可以支持将旧库转换/包装为ES6可导入的格式？我真的不想在页面的HTML中使用<script>标签。

- backspaces

4

请参见 https://github.com/nolanlawson/cjs-to-es6 以获得示例。当然，您可能需要对包装器进行一些手动处理，因为ES6模块与其他模块之间存在根本性的差异。我想知道您所说的“现代浏览器”是指哪些浏览器。 - Estus Flask

谢谢，这可能非常适合所有基于npm的项目...那将会很酷！关于浏览器：http://caniuse.com/#feat=es6-module..FFox、Safari Tech Preview和Edge都支持模块，通常需要使用标志。我已经使用过STP，它非常棒！ - backspaces

当然不是适用于所有情况 - 这是因为模块的工作方式。CJS模块本质上是动态的，条件require随处可见。ES6模块是静态的。通常你可能想将CJS导出映射到ES6 *导入，但这并不总是可能的。我不会指望它很快出现在Chrome中。ES6模块看起来像是一个非常遥远的目标，在它们能够在生产中使用之前可能需要数年时间。它们可能很有趣，但我不能建议您在真正的项目中摆脱Webpack，如果您真的想跳过构建步骤，请考虑使用SystemJS。 - Estus Flask

我听你说兄弟！TC39和Whatwg就是无法配对。我们只能留下这些垃圾。我们的孙子辈会谈论“你还记得es6模块吗？好奇怪！” - backspaces

哈哈，说得对，这让我想起了 https://xkcd.com/927/。我不会把构建工具称为“污垢”。通常情况下，即使本地模块可用，Webpack 对于真实世界的项目也有很多好处——css/scss 加载器、压缩器和其他插件... - Estus Flask

糟糕，脏东西等于混乱。我非常尊重这个问题。 - backspaces

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bryan Guner · Accepted Answer

您可以使用Lebab批量转换ES5到ES6的文件。

Lebab将您的ES5代码转换为ES6/ES7。

它恰好与Babel相反。

该网站已经崩溃，但我找到了他们网站的源代码，并从分支重新部署，以便在应用于可能重要的文件之前您可以看到它的作用...

#演示

安装

使用npm进行安装：

$ npm install -g lebab

使用方法

通过 lebab 命令行工具，将你的老旧代码转换为新的形式，实现特定的转换：

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

或者直接对整个目录中的文件进行原地转换：

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

我的个人工作流程如下：


npm i lebab -g

安全：

 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

所有人：

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

或者，我使用 vscode 的 es5 到 es6 转换插件...