AngularJS + TypeScript + ES6模塊：如何捆綁瀏覽器？

Question

我正在使用Angular，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：\\ the \\ path \\到\\ my \\ app'模塊'modules / SubModule'

那么我如何讓Browserify工作呢？ 或者還有其他工具可以更好地工作嗎？ 我在Github上發現了這個問題，似乎說TypeScript的默認導出不能與CommonJS互操作 。 那我該怎么辦？

---

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

import SubModule from './modules/SubModule';

有沒有人知道Browserify插件會自動查找相對路徑，即使我沒有指定./ ？ 我的應用程序相當大，我不想通過修改所有import語句。

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

Answer 1

您可以使用JSPM / Systemjs異步加載模塊，如：

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

和systemjs-builder使用命令行工具創建包（jspm-cli）

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

或使用gulp任務：

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

Answer 2

如果您不指定它，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

Answer 3

IMO，Browserify的重點是“ify”服務器上的NodeJS / CommonJS模塊化結構，直到瀏覽器/客戶端。 如果您這樣想，那么您不希望更改import / require語句的行為，保留“./”，因此您應保持對稱性，因為它應該與NodeJS中的common require語法內聯。 我認為這只是很好的編碼實踐。

Answer 4

我為這個目的創建了一個gulp適配器。 它使用tscript.json打字稿項目文件中的擴展，從Typescript ES6模塊語法構建模塊包。 然后，gulp構建將所有組件放在一個組合的javascript包中。 我最近移植了Typescript-Angular todoMVC應用程序以使用typescript ES6語法，該語法是使用TsProject編譯和構建的。 它在TsProject TodoMVC github網站上完整記錄。 請查看它是否符合您的需求。