用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; 

所以模块1和模块2已经转换打字稿模块。模块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' ]); 

花了一点时间，但作为议员ges在很大程度上是机械的，我能够在整个应用程序中系统地工作。一些子文件夹只是使用'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模块应该导出模块：

例如过滤器模块。

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

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

export default filters;