用webpack导入angularjs模块
我们已经有了一个用angularjs编写的相当大的项目,并且正在逐步向角4移动。计划是首先将所有内容重写到typescript + angularjs组件。我们建立了一个空的angularjs + webpack + typescript项目,并将传统的angularjs模块转换为typescript。这工作正常,但由于项目的规模,我们现在想添加'旧'的angularjs模块并执行这些脚本,因此我们有一个完整的工作项目。用webpack导入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代码)?
考虑只是咬紧牙关,一口气做所有事情的最小转换。
我刚刚通过类似的练习转换现有的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'文件导入到应用程序的顶层(尽管这不是真的需要)。
下一步将转换控制器和指令到组件,但现在应该是非常简单的。
您必须导出每个模块,然后将它们导入到您的应用程序模块中。请注意下面的例子:
//..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;
这与'module.exports'和'require()'相等吗? –