【问题标题】：Application rollup and tree shaking应用程序汇总和摇树
【发布时间】：2017-03-18 01:37:43
【问题描述】：

我们在这里得到的是一个相当大的 Angular 2 应用程序，它主要是在 Angular 还很年轻时开发的，并且没有工作 compiler-cli 之类的东西。完成后，我总是想到，在某个时候我们将进行 tree shaking 和 AoT 编译，我正试图让它在一段时间内工作，但仍然没有成功。

问题在于，每当我尝试应用任何可以在 www 上大量找到的 rollup 例程时，我都会偶然发现一些东西......每次。

我认为这个构建与其他可以在 Web 上看到的构建不同的是项目布局 - 我们这里有一堆自写的外部 Angular 2 npm 模块，它们将一些通用功能封装到最终项目和那些应该包含在最终包中。

所以布局是：

1) 有多个npm 模块包含TypeScript 源文件以及JavaScript 版本转换为es2015 格式；

2) 有一个应用程序有自己的模块，这些模块严重依赖从外部npm 模块导入的模块；

3) 而且我的要求不高——我只想： a) 将它们全部打包在摇摇晃晃的捆绑包中，这样就完成了； b) 为具有相同布局的生产构建实现 AoT 编译；

问题

每当我尝试使用最简单的 rollup 模块示例时，我最终都会遇到类似的情况：'createPlatformFactory' is not exported by node_modules\@angular\core\bundles\core.umd.js (imported by node_modules\@angular\platform-browser-dynamic\src\platform-browser-dynamic.js). For help fixing this error see https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module 当我尝试将项目转换为 JavaScript 然后将其与 rollup 捆绑在一起时，甚至当我尝试通过rollup-plugin-typescript 启动它。

我对此的假设是，即使自 RC6 以来的 Angular 源采用 es2015 格式 core.umd.js 不是 - 它采用 UMD 格式，具有不同的导入/导出等。

那么，任何人都可以确认这是一个问题吗？另外，我们如何解决这个问题？（我真的尝试了所有我能想象到的解决问题的策略，但都没有奏效。）

希望有人可以帮助解决这个问题。

【问题讨论】：

标签： javascript angular ecmascript-6 rollupjs

【解决方案1】：

如上所述，问题在于 rollup 以 umd 输出包而不是 es6 源文件为目标，正如我发现的那样，可以通过将角度模块请求路径重定向到源文件来解决，例如这个：

if (id.startsWith('@angular/')) { return `${__dirname}/node_modules/${id}/index.js`; } 并且，正如 rollup 完成的那样，程序继续进行，没有错误。这听起来确实很成功，但事实并非如此......

结果我没有看到任何关于删除方法的通知，正如我所期望的那样，我没有看到输出包大小有任何显着减少。

此外，由于尝试通过运行以下命令将输出包转换为 es5 格式：

tsc --target es5 --allowJs ./dist/bundle.es2015.js --out ./dist/bundle.js

我从node_modules\typescript\lib\tsc.js:37826 收到RangeError: Maximum call stack size exceeded 的错误

所以还是一样 - 一个问题解决导致另一个问题，但仍然没有结果。

任何有关如何处理此问题的想法将不胜感激！

顺便说一句 - 考虑到所有这些显然都是针对 UMD 捆绑包而不是 ES6 源文件，任何人都知道@angular 摇树在任何可以在互联网上找到的示例中如何工作？

【讨论】：