javascript - AngularJS + TypeScript + ES6 模块 : how to bundle for browser?

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 给我一个错误，例如:

Cannot find module 'modules/SubModule' from 'C:\the\path\to\my\app'

那么如何让 Browserify 工作呢？还是有其他工具会更好用？我在 Github 上发现了这个问题，似乎是说 default exports from TypeScript aren't interoperable with CommonJS .那我该怎么办？

---

编辑 所以我想我已经找到了问题所在。 Browserify 要求本地路径以 ./ 开头。因此，例如，我需要按如下方式引用我的子模块:

import SubModule from './modules/SubModule';

有人知道即使我没有指定 ./ 也会自动查找相对路径的 Browserify 插件吗？我的应用程序相当大，我不想遍历和修改所有导入语句。

或者，另一方面，是否有一个 TypeScript 编译器选项可以为 '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