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给出了一个错误，例如：

无法找到模块＆模块/子模块＆＃39;从＆C; \ the \ path \到\ my \ app＆＃39;

那么我如何让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

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的重点是＆＃34; ify＆＃34;服务器上的NodeJS / CommonJS模块化结构，到浏览器/客户端。如果您这样想，那么您不会想要更改import / require语句的行为，保留＆＃34; ./" ;,因此您保持对称性，因为它应该是内联的使用NodeJS中的common require语法。我认为这只是很好的编码实践。

Answer 4

我为此目的创建了一个gulp适配器。它使用tscript.json打字稿项目文件中的扩展，从Typescript ES6模块语法构建模块包。然后，gulp构建将所有组件放在一个组合的javascript包中。我最近移植了Typescript-Angular todoMVC应用程序以使用typescript ES6语法，该语法是使用TsProject编译和构建的。它已在TsProject TodoMVC github网站上完整记录。请查看它是否符合您的需求。

AngularJS + TypeScript + ES6模块：如何捆绑浏览器？

4 个答案: