javascript - 如何从 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: `...`
}

主要.js

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

希望对您有所帮助!