使用 webpack 导入 angularjs 模块

Posted 2023-03-13

【中文标题】使用 webpack 导入 angularjs 模块

【英文标题】：Import angularjs modules with webpack

【发布时间】：2018-03-15 20:02:44

【问题描述】：

我们有一个用 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 模块。模块 3 和模块 4 不是。我们还不想转换它们，但确实想引用它们。假设这些模块位于“/frontend/module3.js”和“/frontend/module4.js”中，我将如何使用 webpack 完成这项工作（执行 js 代码）？

【参考方案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”文件导入应用程序的顶层（尽管这并不是真正需要的）。

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

【讨论】：

这是否与module.exports 和require() 一样有效？

【参考方案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;

【讨论】：

他们可以导出模块，但约定似乎是导出模块名称（例如 angular-ui-router 就是这样做的）。但它并没有统一实现，因此您必须小心，因为许多第三方模块不会导出它们的名称，甚至不会导出任何有用的东西（例如 angular-sanitize 不会导出任何东西）。

还没有注意到。谢谢