首页 文章

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

提问于
浏览
0

我有一个问题,我的加载项在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");
}

1 回答

  • 0

    Office 2013和2016 for Windows(桌面应用程序)使用嵌入式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" ]
        }
    }
    

相关问题