OfficeJS Outlook SmartAlerts：如何在launchevent.js中引入TypeScript模块

下面是几个可行的解决思路：

• 把TS模块编译成IIFE格式的独立JS文件
  既然launchevent.js不支持ES模块的import，那就把需要调用的TS代码编译成自执行函数（IIFE），将方法挂载到全局对象上：

  1. 给目标TS模块单独配置编译规则：在tsconfig.json里新增编译选项，设置"module": "ESNext"、"outFile": "./dist/your-module.iife.js"，关闭"declaration"。
  2. 编写TS模块时，把要暴露的方法挂载到window上，示例：

     // your-module.ts
     export function checkMessageContent() {
       // 这里写你的消息校验逻辑
       return { pass: true, tip: "内容合规" };
     }
     
     // 挂载到全局window对象
     (window as any).MessageChecker = { checkMessageContent };
     

  3. 编译这个TS文件得到独立的IIFE JS，然后在event.html里先引入这个文件，再加载launchevent.js：

     <script src="../dist/your-module.iife.js"></script>
     <script src="launchevent.js"></script>
     

  4. 在launchevent.js里直接调用全局方法：

     // launchevent.js
     function handleMessageSend(event) {
       const checkResult = window.MessageChecker.checkMessageContent();
       if (!checkResult.pass) {
         event.completed({ allowEvent: false, errorMessage: checkResult.tip });
       } else {
         event.completed({ allowEvent: true });
       }
     }
     
     Office.actions.associate("OnMessageSend", handleMessageSend);
     

• 直接内联TS编译后的代码
  如果你的TS模块逻辑比较简单，没必要单独拆文件，直接把TS编译成ES5代码，复制粘贴到launchevent.js里对应的位置，直接调用即可。

• 用Webpack打包成单文件
  可以把launchevent.js作为Webpack的入口，把依赖的TS模块一起打包成不依赖ES模块的独立文件：

  1. 先把TS模块编译成CommonJS格式，然后在launchevent.js里用require引入。
  2. 配置Webpack的输出选项，设置output.libraryTarget: 'window'，让打包后的代码挂载到全局。
  3. 最后用打包生成的文件替换原来的launchevent.js，在event.html里引入这个打包文件就行。

内容的提问来源于stack exchange，提问作者Morris