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'文件，其中包含相应的模块名称，但是没有任何真正的更改。

我还必须将所有模板网址更改为导入，然后将“.scss”文件导入到应用程序的顶层（尽管这并不是真的需要）。

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

Answer 2

您必须导出每个模块，然后在您的应用模块中导入它们。请注意以下示例：

//..import your other ts modules
import module3 from './frontend/module3.js' //This have to be relative path
import module4 from './frontend/module4.js'

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

另请注意，您的旧js模块应导出模块：

e.g。过滤器模块。

import angular from 'angular';
import myNiceFilter from './myNiceFilter.filter';

var filters = angular.module('filters',[]);
filters.filter('myNiceFilter', myNiceFilter);

export default filters;

使用webpack

2 个答案: