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

Question

我们有一个使用ES5的项目，它依赖于角1.x的模块系统。我已经看过很多指南，比如“第一步:重写一切”，但对于每小时都在变化的大型代码基来说，这并不是最理想的。

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

我最初的想法是在每个文件的顶部添加导入语句(注释掉，不中断构建)，同时仍然使用角的模块系统。这样，每个ES6模块都包含一个AngularJS模块。当所有文件都有时，我们取消对导入的注释，并将构建系统更改为webpack。然后，我们可以一个接一个地进行，ES6-在我们有时间的情况下，将实际的代码化。

Answer 1

我采用了“重写一切”的方法，将AngularJS应用程序移动到角，这是非常值得的。但是，我完全理解您的环境如何要求您找到一条较少中断的迁移路径。

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

仍然存在的一个大问题是，您应该切换框架吗？AngularJS非常适合中等规模的应用程序，特别是当您保持良好的关注点分离时。但它从几个方面倒了下来：

1. 如果你想让你的应用程序在手机和chromebooks上顺利运行，你应该切换。 AngularJS比现代框架慢得多，需要更多的客户端处理能力。使用AngularJS实现服务器端呈现也不是一种很好的方法，这也可以帮助移动性能。
2. 如果您的应用程序显示需要定期更新的长列表或复杂的表格数据，则应该切换。 AngularJS不擅长同时呈现大量信息，特别是当它需要实时更新或相互关联时。

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

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

例如：

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);

希望这能有所帮助！