5

我正在使用 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\to\my\app”中找到模块“modules/SubModule”

那么如何让 Browserify 工作呢？还是有其他更好的工具？我在 Github 上发现了这个问题，似乎说TypeScript 的默认导出不能与 CommonJS 互操作。那我该怎么办？

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

import SubModule from './modules/SubModule';

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

或者，另一方面，是否有用于发出的 TypeScript 编译器'./modules/SubModule'选项'modules/SubModule'？

4

4 回答 4

2

您可以使用 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

于 2015-08-12T07:03:52.950 回答
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
于 2015-05-19T22:58:21.850 回答
1

IMO，Browserify 的全部意义在于将服务器上的 NodeJS/CommonJS 模块化结构“化”到浏览器/客户端。如果你是这样想的，那么你就不想改变 import/require 语句的行为，保留“./”，这样你就可以保持对称性，因为它应该与 NodeJS 中的常见 require 语法内联。我认为这只是很好的编码实践。

于 2015-07-22T03:47:54.460 回答
0

我正是为此目的创建了一个 gulp 适配器。它使用 tsconfig.json typescript 项目文件中的扩展从 Typescript ES6 模块语法构建模块包。然后 gulp 构建将所有组件放在一个组合的 JavaScript 包中。我最近移植了 Typescript-Angular todoMVC 应用程序以使用使用 TsProject 编译和构建的 typescript ES6 语法。它在TsProject TodoMVC github 站点上有完整的文档。请看看它是否满足您的需求。

于 2015-10-02T15:39:57.047 回答