Question

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

有没有办法让这种痛苦的变化更加零碎？从我的角度来看，完全迁移到Angular 2+可能更容易，而不是使用Angular 1.x来获得ES6的好处。

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

Answer 1

我采用了“重写一切”的方法将AngularJS应用程序移动到Angular，这非常值得。但我完全理解你的情况可能会要求你找到一个不那么中断的迁移路径。

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

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

如果您希望自己的应用在手机和Chromebook上流畅运行，就应该切换。 AngularJS明显比现代框架慢，并且需要更多的客户端处理能力。使用AngularJS实现服务器端渲染也不是一个好方法，它也可以帮助提高移动性能。
如果您的应用显示长列表或需要定期更新的复杂表格数据，您应该切换。 AngularJS不擅长立即渲染大量信息，尤其是在需要时实时更新或是否相互关联。

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

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

e.g。

my-component.js

class MyComponentController { ... }

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

main.js

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

希望这有帮助！

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

1 个答案: