TypeScript与ES6模块的最佳方法是什么?

时间:2015-11-21 13:06:35

标签: javascript build typescript ecmascript-6 browserify

我正在开始一个新的Web项目并尝试使用TypeScript,主要是作为ES6转换器,但还有类型检查的额外好处,特别是对于现有的库,例如jQuery和DefinitelyTyped类型定义。

自最新版本以来,TypeScript既支持自己的内部模块,也支持ES6模块,后者称为“外部”模块。因为ES6比TypeScript更标准,我的意图是使用ES6 /外部模块而不是传统的/内部TypeScript模块。

我在几个文件/模块中定义了自己的代码,但我希望构建生成一个可以从浏览器加载的.js文件。

问题在于,据我所知,TypeScript只能在使用自己的模块格式时生成单个输出文件。如果我尝试使用ES6外部模块,那么它会为每个.ts文件生成一个单独的.js文件。

这意味着我需要使用browserify连接它们,但我也想要源地图支持,这意味着我应该为输入和输出源地图配置browserify,然后将它与exorcist结合使用,从而将源地图提取出来束。

这看起来像一个非常复杂的构建设置。是不是有一种更直接的方式,也许是TypeScript直接支持?什么是最好的方法?你推荐什么?

2 个答案:

答案 0 :(得分:6)

让TypeScript做它最擅长的......

  • 将类型添加到JavaScript,即ES5 / ES6 / ES7
  • 透明至ES5
  • 通过指定的模块语法(commonjs,amd,umd,system)解析模块

然后找到另一个工具,它将获取单独的文件并将它们组合成一个捆绑的文件(按正确的顺序)。我的建议是调查:

  • 的WebPack
  • browserify
  • tsify

答案 1 :(得分:0)

您是否在浏览器中寻找解决方案?如果是这样,我强烈推荐我的项目Zwitterion。它删除了复杂的构建步骤,并允许您使用普通脚本标记将TypeScript直接包含在浏览器中。您也可以直接使用标准ES模块,无需额外设置。它使用SystemJS来实现这一目标。目前还没有源地图支持,但应该会有。如果您想了解更多信息,除了README中的内容之外,您还可以阅读"Zwitterion, forget the build step"