AngularJS + TypeScript + ES6模块：如何打包浏览器？

我正在使用Angular，TypeScript和ES6模块语法。让我们假设我有一个模块定义如下：AngularJS + 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：\中\路径\为\我\应用程序”

所以我怎么做Browserify工作？还是有另一种工具可以更好地工作？我在Github上发现了这个问题，似乎是default exports from TypeScript aren't interoperable with CommonJS。那么我该怎么做？

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

import SubModule from './modules/SubModule';

有谁知道一个Browserify插件会自动寻找一个相对路径，即使我不指定./的？我的应用程序非常庞大，我不想通过并修改所有导入语句。

或者，另一方面，是否有一个TypeScript编译器选项可以为'modules/SubModule'发出'./modules/SubModule'？

来源

2015-05-19 battmanz

关于'。/'问题，你可以看一下https://github.com/substack/browserify-handbook#avoiding- – hgoebl

如果你没有指定它，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

来源

2015-05-19 22:58:21

现在，我已经更新了所有的路径以包含'./'。但是，这似乎并不理想。我真的很想使用ES6模块语法，如下所示：http://www.2ality.com/2014/09/es6-modules-final.html。注意，'。/'不是必需的。 – battmanz

你是对的，但它必须被编译成ES5 ......在6to5编译器中可能有一个选项！ –

IMO，Browserify整点是“国际预科”对的NodeJS/CommonJS服务器上的模块化结构，连接到浏览器/客户端。如果你这样想，那么你不想改变import/require语句的行为，保留“./”，所以你保持对称性，因为它应该与NodeJS中的通用require语法内联。我认为这只是良好的编码习惯。

来源

2015-07-22 03:47:54 wayofthefuture

可以使用JSPM/Systemjs加载模块异步地像：

System.import('./packageName/ModuleName')

和systemjs-生成器创建具有

jspm bundle ./packageName/ModuleName dist/app.js

或咽任务使用命令行工具（JSPM-CLI）束：

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-12 07:03:52 b091

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

来源

2015-10-02 15:39:57

TsProject现在支持React typescript ES6模块包。示例应用程序位于[ReactTodoMVC]（https://github.com/ToddThomson/tsproject/tree/master/ReactTodoMVC） –

AngularJS + TypeScript + ES6模块：如何打包浏览器？

回答

相关问题