angular-cli如何与ES6模块配合使用？

Question

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”语句，所以显然我做错了。

Answer 1

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

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

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

Answer 2

好的，所以我发现了

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

请参阅What's new in webpack 2

Answer 3

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

{

"target": "es6",

}