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