EMP微前端之emp-tune-dts-plugin插件

时间:2021-2-20 作者:admin

EMP微前端方案针对团队规范,推荐了几个方式,其中之一就是用ts声明文件。本文介绍的@efox/emp-tune-dts-plugin插件,可以为EMP微前端项目生成类型文件,利于团队的规范性。

🧐 为什么

✨ 特性

  • 生成一个含有项目所有类型的 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微前端方案的教程目录如下:

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。