AngularJS + TypeScript + ES6模塊：如何打包瀏覽器？

我正在使用Angular，TypeScript和ES6模塊語法。讓我們假設我有一個模塊定義如下：AngularJS + TypeScript + ES6模塊：如何打包瀏覽器？

// SubModule.ts 
import MyService from 'services/MyService'; 

export default angular.module('subModule', []) 
    .service('myService', MyService);

編譯JavaScript的將是：

var MyService_1 = require('services/MyService'); 
exports.default = angular.module('subModule', []) 
    .service('myService', MyService_1.default);

我的應用取決於該模塊上。所以我在App.ts文件中的以下內容：

// App.ts 
import SubModule from 'modules/SubModule'; 

angular.module('app', [SubModule.name]);

用下面編譯的JavaScript：

var SubModule_1 = require('modules/SubModule'); 
angular.module('app', [SubModule_1.default.name]);

所以，現在我想這個捆綁的瀏覽器。我目前正在嘗試使用Browserify，但我願意使用任何可用的捆綁工具。 Browserify給我一個錯誤，如：

無法找到模塊「模塊/子模塊」「C：\中\路徑\爲\我\應用程序」

所以我怎麼做Browserify工作？還是有另一種工具可以更好地工作？我在Github上發現了這個問題，似乎是default exports from TypeScript aren't interoperable with CommonJS。那麼我該怎麼做？

編輯所以我想我已經找到了問題。 Browserify要求本地路徑以./開頭。因此，舉例來說，我需要引用我的子模塊如下：

import SubModule from './modules/SubModule';

有誰知道一個Browserify插件會自動尋找一個相對路徑，即使我不指定./的？我的應用程序非常龐大，我不想通過並修改所有導入語句。

或者，另一方面，是否有一個TypeScript編譯器選項可以爲'modules/SubModule'發出'./modules/SubModule'？

來源

2015-05-19 battmanz

關於'。/'問題，你可以看一下https://github.com/substack/browserify-handbook#avoiding- – hgoebl

如果你沒有指定它，browserify會查看NPM包（來自node_modules forlder）。如果您想說「這是我的文件之一，而不是模塊」，則需要./。

注：

對於一個大項目的問題，我會做一個簡單的bash腳本是這樣的：

files=`find . -type f` 
from="from 'modules/" 
to="from './modules/" 

for file in $files 
do 
    sed -i 's/$from/$to/g' $file 
done

來源

2015-05-19 22:58:21

現在，我已經更新了所有的路徑以包含'./'。但是，這似乎並不理想。我真的很想使用ES6模塊語法，如下所示：http://www.2ality.com/2014/09/es6-modules-final.html。注意，'。/'不是必需的。 – battmanz

你是對的，但它必須被編譯成ES5 ......在6to5編譯器中可能有一個選項！ –

IMO，Browserify整點是「國際預科」對的NodeJS/CommonJS服務器上的模塊化結構，連接到瀏覽器/客戶端。如果你這樣想，那麼你不想改變import/require語句的行爲，保留「./」，所以你保持對稱性，因爲它應該與NodeJS中的通用require語法內聯。我認爲這只是良好的編碼習慣。

來源

2015-07-22 03:47:54 wayofthefuture

可以使用JSPM/Systemjs加載模塊異步地像：

System.import('./packageName/ModuleName')

和systemjs-生成器創建具有

jspm bundle ./packageName/ModuleName dist/app.js

或咽任務使用命令行工具（JSPM-CLI）束：

var Builder = require('jspm').Builder; 
var builder = new Builder(); 
builder.loadConfig('jspm.conf.js') 
    .then(function() { 
     var buildConfig = { 
      sfxFormat: 'amd', 
      minify: true, 
      sourceMaps: true 
     }; 
     return builder.buildSFX('./packageName/ModuleName', outFile, buildConfig); 
    });

在這裏你可以看到完整的工作示例：https://github.com/b091/ts-skeleton

來源

2015-08-12 07:03:52 b091

我爲此創建了一個吞嚥適配器。它使用TSconfig.json打字稿項目文件中的擴展名從Typescript ES6模塊語法構建模塊打包。然後gulp構建將所有組件集中到一個組合的JavaScript包中。我最近移植了Typescript-Angular todoMVC應用程序以使用與TsProject一起編譯和構建的typescript ES6語法。它完全記錄在github網站的TsProject TodoMVC上。請看看它是否符合您的需求。

來源

2015-10-02 15:39:57

TsProject現在支持React typescript ES6模塊包。示例應用程序位於[ReactTodoMVC]（https://github.com/ToddThomson/tsproject/tree/master/ReactTodoMVC） –

AngularJS + TypeScript + ES6模塊：如何打包瀏覽器？

回答

相關問題