angular-cli 如何与 ES6 模块一起工作？

How does angular-cli work with ES6 modules?

angular-cli 使用 es6 模块作为 TypeScript 的输出格式： 在 tsconfig.json:

{
    "compilerOptions": {
        "modules": "es6",
        "target": "es5",
        ...

后来 webpack 如何处理它以使其在 es5 中工作？

如果我没理解错的话，很多项目都使用babel来让es6模块工作，但是我在angular-cli.

里面没有找到任何对babel的引用

我试图从一开始就建立一个 webpack 项目，因为事实证明 angular-cli 使用的 webpack 配置对于我们的项目来说 good/flexible 不够用。

当我尝试使用 es6 模块时，我的 "bundled" js 文件中出现了未处理的 "import" 语句，所以显然我做错了什么。

好的，所以我发现

  • angular-cli 使用 webpack 2 BETA
  • webpack 2 beta 原生支持 ES6 模块

见What's new in webpack 2

angular cli 使用支持ESM（es6模块）的webpack 2 因此，当 typescript 被编译时，它会编译为 es5，但将所有导入语句保留为 es6 样式模块。

然后 webpack 2 可以使用静态分析和 tree shaking 来优化 es6 模块，以删除未使用的代码段和未使用的模块。

所以你可能做错的是使用不支持 es6 模块的 webpack 1。

只需将 tsconfig.json 文件中的目标从 es5 更改为 es6，模块和 lib 等所有其他内容都已经支持 es6。

{

"target": "es6",

}