gruntjs - 在 sapui5 项目中包含 babel polyfill 的最佳方法是什么？

Question

我们使用 grunt 作为任务运行器，我们使用与 openui5 开发人员推荐和使用的 grunt 相同的设置。

https://github.com/SAP/grunt-openui5

https://github.com/SAP/openui5/blob/master/docs/tools.md

当我们构建应用程序时，我们希望将 babel-polyfill 添加到项目中（以便我们可以使用最新的 javascript 功能），就像使用 webpack 一样。感谢您提前回答。

Answer 1

babel polyfill的官方文档中描述了您拥有的选项。当我认为应该使用它们中的每一个时，我会稍微描述一下。

这取决于您之后实际使用该应用程序的方式：它是独立的 UI5 应用程序（即您直接从 HTML 文件运行它）还是 Fiori 应用程序（即您从 Fiori Launchpad 运行它）？

如果它是一个独立的应用程序，那么包含它的最简单和最非侵入性的方法babel-polyfill是简单地dist/polyfill.js通过<script>标签将它包含在您的 HTML 文件中。

如果它是一个 Fiori 应用程序，那么您唯一的机会就是将 polyfill 预先添加到您的脚本文件之一。它必须在其他任何东西之前运行，所以我会将它添加到您在构建阶段获得的 Component-preload.js 文件中。要使用 grunt 执行此“前置”操作，您可以使用grunt-contrib-concat插件。

另一种可能性是简单地require在 Component 模块中使用 polyfill。您可以sap.ui.define在组件文件的调用中执行此操作：

// the oPolyfill parameter most likely will have nothing in it
// as the polyfill most surely does not use the SAP AMD system
sap.ui.define(["./path/to/polyfill"], function(oPolyfill) {
    //...
}); 

使用此策略时，生成的Component-preload.js文件还将包含 polyfill，并且 polyfill 将在您的组件代码开始运行之前加载。

请记住，如果您在 Fiori Launchpad 环境中使用这些方法中的任何一种，polyfill 也会影响其他 Fiori 应用程序。这是不可避免的，因为 polyfill 修改了 babel 文档中指定的全局变量：

为了做到这一点，polyfill 添加到全局范围以及像 String 这样的原生原型。