繁体   English   中英

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

[英]How to Migrate from AngularJS Module system to ES6 Modules

我们有一个使用 ES5 并依赖于 Angular 1.x 的模块系统的项目。 我已经看到很多指南都说“第一步:重写所有内容” ,但这对于每小时都在变化的大型代码库来说并不是真正的最佳选择。

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

我最初的想法是在每个文件的顶部添加导入语句(注释掉,以免破坏构建),同时仍然使用 Angular 的模块系统。 这样每个 ES6 模块都包含一个 AngularJS 模块。 当所有文件都具有该文件时,我们取消对导入的注释并将构建系统更改为 webpack。 然后,我们可以在有时间的情况下逐一完成并 ES6 化实际代码。

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

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

剩下的一个大问题是,你应该切换框架吗? AngularJS 非常适合中型应用程序,尤其是当您保持良好的关注点分离时。 但它在几个方面下降:

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

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

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

例如

我的component.js

class MyComponentController { ... }

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

主文件

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

希望这可以帮助!

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM