轉自團隊掘金原文：https://juejin.cn/post/6897018942889656334
EMP微前端方案針對團隊規范，推薦了幾個方式，其中之一就是用ts聲明文件。本文介紹的@efox/emp-tune-dts-plugin插件，可以為EMP微前端項目生成類型文件，利於團隊的規范性。
🧐 為什么
- Typescript開發中，引用遠程項目內容需要類型文件支撐。
- tsc 所生成的模塊類型是相對路徑，不可被遠程項目使用。
- Module Federation issues: How typesafe can a remote be with Typescript?
✨ 特性
- 生成一個含有項目所有類型的 d.ts 文件
- 類型中帶有當前項目名，並非相對路徑
- 形成類型閉環，生成到引用已完善
- 支持自定義修改
👨🔧 架構
📦 快速開始
npm i @efox/emp-tune-dts-plugin or yarn add @efox/emp-tune-dts-plugin
👨🏻💻 在 Webpack 上使用插件
const { TuneDtsPlugin } = require('@efox/emp-tune-dts-plugin') 方式(1)(推薦)
const createName = 'index.d.ts' const createPath = './dist' function operationDemo(fileData) { console.log(fileData) return fileData; } plugin.tunedts = { plugin: TuneDtsPlugin, args: [ { output: path.join(createPath, createName), path: createPath, name: createName, isDefault:true, // 傳入函數自定義操作 operation: operationDemo }, ], }; 方式(2)
function operationDemo(fileData) { console.log(fileData) return fileData; } plugins: [ new TuneDtsPlugin({ output: path.join(createPath, createName), path: createPath, name: createName, isDefault:true, // 傳入函數自定義操作 operation: operationDemo }) ] 參數解釋：
| 參數名 | 類型 | 解釋 |
|---|---|---|
| output | string (必填) | d.ts 文件輸出目錄 |
| path | string (必填) | d.ts 文件夾路徑 |
| name | string (必填) | d.ts 文件名 |
| isDefault | boolean(必填) | 默認將相對路徑替換為絕對路徑 |
| operation | Function (選填) | 自定義操作 d.ts 文件函數（isDefault 為 true 時，operation 會繼承 默認 Replace 后的內容）。入參為 d.ts 文件內容，操作完成后必須返回 d.ts 數據。 operationDemo 為例子 |
💪 生成
- 完成接入 Webpack Plugin 后，運行 Webpack 生成當前 Module Federation 項目的類型文件將保存在 dist
🔗 遠程引用
方法1
yarn add @efox/emp-cli
yarn emp tss 遠程項目地址/index.d.ts -n 遠程項目名.d.ts
方法2
使用 VSCode 插件： emp-sync-base
最后
EMP微前端方案目前已經應用到我司內部80%大型線上項目，都帶來了顯著的收益，在實踐的錘煉過程中，沉淀了完整的腳手架和插件等生態系統，更是總結了一些實戰的技巧教程供大家一起學習和探究。
EMP微前端方案的教程目錄如下：