如何从 AngularJS 模块系统迁移到 ES6 模块

Question

我们有一个项目使用 ES5 并依赖于 Angular 1.x 的模块系统。我看过很多指南说"Step One: Re-write everything"，但这对于每小时都在变化的大型代码库来说并不是最佳选择。

有没有办法让这种痛苦的变化变得更加零碎？据我所知，完全迁移到 Angular 2+ 可能比使用 Angular 1.x 获得 ES6 的好处更容易。

我最初的想法是在每个文件的顶部添加导入语句（注释掉，以免破坏构建），同时仍然使用 Angular 的模块系统。这样每个 ES6 模块都包含一个 AngularJS 模块。当所有文件都有这个时，我们取消注释导入并将构建系统更改为 webpack。然后我们可以一一浏览，并在有时间的时候对实际代码进行 ES6 化。

Answer 1

我采用“重写一切”的方法将 AngularJS 应用程序迁移到 Angular，这是非常值得的。但我完全理解您的情况可能会要求您找到一条中断较少的迁移路径。

我目前正在将另一个更大的 AngularJS 应用程序迁移到现代框架。好消息是，在这样的过渡时期，只要小心谨慎，没有理由不同时运行两个 SPA 框架。例如，您可以在 AngularJS 应用程序中引导 Aurelia，如果您解耦状态管理（例如，通过使用 Redux），AngularJS 和 Aurelia 组件都可以很好地订阅您的数据存储。

剩下的大问题是，应该您切换框架吗？ AngularJS 非常适合中型应用程序，特别是如果您保持良好的关注点分离。但它在几个方面下降：

1. 如果您希望您的应用在手机和 chromebook 上流畅运行，您应该切换。 AngularJS 明显比现代框架慢，并且需要更多的客户端处理能力。使用 AngularJS 实现服务器端渲染也没有什么好方法，这也有助于提高移动性能。
2. 如果您的应用程序显示需要定期更新的长列表或复杂的表格数据，您应该切换。 AngularJS 不擅长一次呈现大量信息，尤其是在需要时实时更新，或者如果它是高度相关的。

至于为 AngularJS 实现 ES6 模块，您可以花时间导出组件并将它们导入/注册到 AngularJS 模块的单独文件中——这与 Angular 现在所做的非常相似。但我不确定有什么好处。您具体希望实现什么目标？

如果明确利用 Webpack，我同意随着时间的推移添加导入和导出是一个很好的第一步，并且您应该将组件和指令定义为每个文件中的导出。

例如

我的组件.js

class MyComponentController { ... }

export var MyComponent = {
    bindings: {...},
    controller: MyComponentController, 
    template: `...`
}

main.js

import {MyComponent} from 'my-component'
angular.module('my-module').component('myComponent', MyComponent);

希望这会有所帮助！