使用webpack导入angularjs模块

Question

我们有一个用angularjs编写的相当大的项目,并且逐渐变为角度4.计划是首先将所有内容重写为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已经被转换成了typescript模块.模块3和模块4没有.我们不想转换那些但是想要引用它们.让我们说这些模块位于'/frontend/module3.js'和'/frontend/module4.js',我将如何使用webpack进行这项工作(执行js代码)？

Answer 1

考虑只是咬住子弹,一次性完成对所有事物的最小转换.

我刚刚进行了类似的练习,将现有的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更改为导入,然后将'.scss'文件导入到应用程序的顶层(尽管这并不是真的需要).

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