使用Webpack导入AngularJS模块

Question

我们有一个用angularjs编写的相当庞大的项目，并逐渐转移到angular 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模块。Module3和Module4没有转换。我们不想立即将它们转换，但是仍然想引用它们。假设这些模块位于“/frontend/module3.js”和“/frontend/module4.js”，我应该如何使用webpack使其正常工作（执行js代码）？

- Elger Mensonides

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”文件导入到应用程序的顶级目录中（虽然这并不是真正需要的）。

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

- Duncan

---

这个能和 module.exports 和 require() 一样工作吗？ - Marinos An

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模块应该导出一个模块，例如过滤器模块。

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

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

export default filters;

- korteee

---

他们可以导出一个模块，但惯例似乎是导出模块名称（例如angular-ui-router就是这样做的）。然而，并不是所有的模块都实现了这个惯例，所以你必须小心，因为许多第三方模块不会导出它们的名称，甚至不会导出任何有用的东西（例如angular-sanitize不会导出任何东西）。 - Duncan

还没有注意到。谢谢。 - korteee