The JavaScript language did not specify, until ECMAScript 6 (ES6), native features for streamlining encapsulation and modularity. Developer community filled the gap with a proliferation of design patterns and module formats, with impact on code reusability, portability and complexity of build configurations. This work studies the automated refactoring of legacy ES5 code to ES6 modules with fine-grained reuse of module contents through the named import/export language constructs. The focus is on reducing the coupling of refactored modules through destructuring exported module objects to fine-grained module features and enhancing module dependencies by leveraging the ES6 syntax. We employ static analysis to construct a model of a JavaScript project, the Module Dependence Graph (MDG), that represents modules and their dependencies. On the basis of MDG we specify the refactoring procedure for module migration to ES6. A prototype implementation has been empirically evaluated on 19 open source projects. Results highlight the relevance of the refactoring with a developer intent for fine-grained reuse. The analysis of refactored code shows an increase in the number of reusable elements per project and reduction in the coupling of refactored modules. The soundness of the refactoring is empirically validated through code inspection and execution of projects’ test suites.

JavaScript 语言直到 ECMAScript 6 (ES6) 才指定用于简化封装和模块化的本机特性。开发人员社区通过设计模式和模块格式的激增填补了这一空白，这对代码的可重用性、可移植性和构建配置的复杂性产生了影响。这项工作研究了将遗留 ES5 代码自动重构为 ES6 模块，并通过命名导入/导出对模块内容进行细粒度重用语言结构。重点是通过将导出的模块对象解构为细粒度模块功能并通过利用 ES6 语法增强模块依赖性来减少重构模块的耦合。我们使用静态分析来构建 JavaScript 项目的模型，即模块依赖图 (MDG)，它表示模块及其依赖项。在 MDG 的基础上，我们指定了模块迁移到 ES6 的重构过程。原型实现已在 19 个开源项目上进行了经验评估。结果突出了重构与开发人员细粒度重用意图的相关性。对重构代码的分析表明，每个项目的可重用元素数量增加，重构模块的耦合减少。