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网站上完整记录。 请查看它是否符合您的需求。