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语句.

或者,在另一方面,有没有打字稿编译器选项发出'./modules/SubModule'的'modules/SubModule'？

Answer 1

如果您不指定它，browserify 将查找 NPM 包（来自node_modulesforlder）。./如果您想说“这是我的文件之一，而不是模块”，则需要。

笔记：

对于大项目的问题，我会做一个简单的 BASH 脚本，如下所示：

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

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