Question

我遇到了一个问题，即我的加载项在Outlook Online中可以正常运行，但是不能在Outlook桌面中运行。从清单成功激活了该加载项，但加载后失败。这是一个React + TypeScript项目（在Webstorm中使用NodeJS + webpack进行测试）。

我已将问题缩小为导入引用的ANY require语句的用法。如果我消除它，它可以正常运行并显示我的测试Office UI Fabric CompoundButton组件。使用代码，它旋转并最终显示空白页。没有引发脚本异常，并且在IE设置中启用了该脚本。

为什么这只会在台式机上失败？

要复制，请使用三个文件：

开始/主页：myapp.tsx
哪个呈现TestComponent.tsx
引用了test.jsx

//myapp.tsx
import TestComponent from './components/TestComponent';
import * as $ from 'jquery';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';

const render = (Component) => {

    ReactDOM.render(
        
            
        ,
        document.getElementById('container')
    );
};

Office.initialize = function () {

    $(document).ready(function () {

        console.log('====myapp.tsx.Office.initialize(): entered');

        render(TestComponent);
    });
};

if ((module as any).hot) {

    console.log('====index.tsx.module() foo');

    (module as any).hot.accept('./components/App', () => {
        const NextApp = require('./components/App').default;
        render(NextApp);
    });
}

//TestComponent.tsx

import * as React from 'react';
import { CompoundButton } from 'office-ui-fabric-react/lib/Button';

//============
// BAD CODE!
//import foo = require('../scripts/test.jsx');
//============

export default class TestComponent extends React.Component {

    render() {

        console.log('====TestComponent.render()');

        //============
        // BAD CODE!
        //foo.testFunction();
        //============

        return(
            
                Create account
            
        );
    }
}

//test.jsx

export function testFunction(){
    console.log("test.jsx: testFunction");
}

Answer 1

用于Windows的Office 2013和2016（桌面应用程序）使用嵌入式IE 11浏览器进行渲染。 IE 11不支持您在Edge，Chrome和Firefox中发现的a lot of the recent JS features。因此，您要么需要填充功能，就需要为IE 11提供替代路径。

一个快速修复程序可能只是更改TypeScript生成JS的方式，使其与IE 11兼容：

{
    "compilerOptions": {
        "skipLibCheck": true,
        "lib": [ "es5", "dom", "es2015.promise" ]
    }
}

仅Outlook桌面上的Web加载项加载问题

1 个答案: