有没有办法在 React Outlook 插件中使用 ES6 语法？

Question

我们正在使用 React 构建 Outlook 加载项。由于我们的主应用程序也是使用 React 构建的，因此我们希望对两者使用相同的代码。而且很多代码都是用ES6语法写的

加载项在这些环境中运行良好：

Outlook 网络邮件（Chrome、Safari、Edge）
来自 Office 365 的最新版 Outlook

但 Outlook 2016 或 2013 中没有。我想最新版本的 Outlook 使用 Edge 来呈现加载项，这就是它起作用的原因。 2013 / 2016 是IE11，不支持ES6.

有很多依赖关系的代码，我不想在非 ES6 中全部翻译，这会花费太多时间。

事实上，在 react-app-polyfill 的帮助下，我们的主应用程序在 IE11 中运行良好。 index.tsx 文件开头的这两行有效：

import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";

我在我们的加载项中做了完全相同的操作，但是当我们在旧版本的 Outlook 上打开它时，我们仍然看到一个空白页面。 Web 应用程序和加载项之间的主要区别在于第一个应用程序是使用 create-react-app 创建的。加载项配置了 webpack。

我错过了什么吗？如果您需要更多信息或代码，请告诉我。谢谢！

Answer 1

好吧，如果你正在构建一个 React 应用程序，你应该有某种 pre-processor/bundler 之类的 webpack 到位。只需放入 Babel 并将其转换为 ES5。这样您就必须手动转换代码，并且即使对于遗留引擎也可以共享相同的代码库。

Answer 2

我目前正在为 Outlook 2016 桌面版（使用 IE11）开发 Outlook 加载项，我可以使用 ES6 功能。

您是否使用 yeoman 和 generator-office 为项目创建样板文件？

就像@philipp 说的那样，您将不得不使用像 babel 这样的转译器将其转换下来并配置您的 bunbdler（例如 webpack）以将该转译器用于 js/jsx 个文件。

// webpack.config.js
    ...
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: [
                    'react-hot-loader/webpack',
                    'babel-loader',
                ],
                exclude: /node_modules/
            },
            ...
         ],
         ...

有没有办法在 React Outlook 插件中使用 ES6 语法？

Is there a way to use ES6 syntax in a React Outlook Add-in?

javascript

reactjs

outlook-web-addins