使用webpack导入angularjs模块

埃尔格·门森尼德斯

我们有一个用angularjs编写的相当大的项目,并且正在逐步移至angular4。该计划是首先将所有内容重写为Typescript + angularjs组件。我们已经建立了一个空的angularjs + webpack + typescript项目,并将旧的angularjs模块转换为typescript。这可以正常工作,但是由于项目的规模,我们现在想添加“旧的” angularjs模块并执行这些脚本,因此我们有一个完整的工作项目。

我还没有找到一种方法来使这项工作。因此,基本上,我们已经有了(为了简洁起见,我省略了一些细节):

app.module.ts:

import * as angular from 'angular';
import { moduleName as module1 } from './app/converted.module1';
import { moduleName as module1 } from './app/converted.module2';

export const moduleName =
    angular.module('application', [
        module1,
        module2,
        'legacy_module_3',
        'legacy_module_4'
    ]).name;

所以module1和module2已经转换为打字稿模块。模块3和模块4没有。我们尚不想转换它们,但确实要引用它们。可以说这些模块驻留在“ /frontend/module3.js”和“ /frontend/module4.js”中,我将如何使用webpack进行这项工作(已执行的js代码)?

邓肯

考虑一下硬着头皮,一次完成最少的转换。

我刚刚进行了类似的练习,将现有的angularjs项目转换为使用webpack。每个模块所需的转换足够小,以至于我只转换了所有模块。所以我们有:

angular.module('somemodule').controller(function(){ ... })

我将其更改为:

export default function SomeController() { ... }

现在,模块声明文件都看起来像:

import SomeController from './some.controller'

export default angular.module('SomeModule', [])
.controller(SomeController)
.name;

然后是顶层:

import SomeModule from './some/module'
angular.module('app', [ SomeModule' ]);

花费了一些时间,但是由于更改主要是机械性的,因此我能够在整个应用程序中系统地工作。一些子文件夹仅使用“ app”模块名称,因此我在每个文件夹中添加了一个具有适当模块名称的“ module.js”文件,但否则没有任何实际更改。

我还必须将所有模板url更改为import,并将'.scss'文件导入到应用程序的顶层(尽管并非必需)。

下一步是将控制器和指令转换为组件,但是现在应该非常简单。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

  1. 1

    来自Microsoft Office加载项taskpane.js的MySQL驱动程序模块的空引用

  2. 2

    使用AWS Cognito和React的仅限Facebook / Google的登录名(无用户名/密码)

  3. 3

    创建Windows Phone 8应用并将其连接到数据库的最佳方法(最好是SQL Server)

  4. 4

    为什么Java中的System.out.println()打印到控制台?

  5. 5

    卷曲函数无法解析来自bash中变量的代理

  6. 6

    是什么在Android的consumer-rules.pro和proguard-rules.pro之间的区别?

  7. 7

    设置与Apache POI Excel表散点图标记图标的颜色

  8. 8

    将Qt Pyside2与asyncio await语法一起使用?

  9. 9

    崇高的文字+蟒蛇的蟒蛇

  10. 10

    任务':app:minifyReleaseWithR8'.java.lang.NullPointerException的执行失败(无错误消息)

  11. 11

    OpenJDK的和AdoptOpenJDK的区别

  12. 12

    大型数据集缓存到Spark内存中时,“超出了GC开销限制”(通过sparklyr和RStudio)

  13. 13

    “执行测试CMAKE_HAVE_LIBC_PTHREAD”失败实际上是什么意思?

  14. 14

    使用Core 2.2中的Identity,如何在关闭浏览器15分钟后保持会话活动?

  15. 15

    React中的ForwardRefExoticComponent和ForwardRefRenderFunction有什么区别?

  16. 16

    猫鼬查找结果,然后将字段替换为findOne

  17. 17

    如何降级Google Colab的Torch版本

  18. 18

    Keras提前停止回调错误,val_loss指标不可用

  19. 19

    如何避免VSCode中的“导入路径不能以.ts扩展名结尾”错误?

  20. 20

    Nuxt.JS:如何在页面中获取路由URL参数

  21. 21

    是否有为什么会AccessibilityManager.sInstance导致内存泄漏的一个原因?

热门标签

归档