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

【问题标题】：How does angular-cli work with ES6 modules?angular-cli 如何与 ES6 模块一起工作？
【发布时间】：2016-10-07 10:32:43
【问题描述】：

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

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

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

如果我理解正确的话，很多项目都使用 babel 来让 es6 模块工作，但我没有在 angular-cli 中找到任何对 babel 的引用。

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

好的，我发现了

【讨论】：

【解决方案3】：

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

{

"target": "es6",

}

【讨论】：