The EMP microfront-end solution recommends several ways to address team specifications, one of which is to declare files using TS. The @efox/emp-tune-dts-plugin introduced in this article can generate type files for EMP micro-front-end projects, which is conducive to team standardization.

Why 🧐

  • In Typescript development, references to remote project content are supported by type files.
  • The module types generated by TSC are relative paths and cannot be used by remote projects.
  • Module Federation issues: How typesafe can a remote be with Typescript?

✨ features

  • Generate a D.ts file that contains all types of the project
  • Type with the current project name, not relative path
  • Form type closed loop, generate to reference has been perfected
  • Custom changes are supported

😊 cases

When there is no emp-tune-dts-plugin in the world

The type file generated by executing tsc-d directly is relative to the path.

When the type file is pulled to the subproject, the subproject does not recognize the type of the remote component, resulting in failure to compile and type prompt.

When the world has the emp-tune-dts-plugin

performyarn emp build --tsThe type file index.d.ts is then generated with the current project name as the path prefix.

The type file generated by the emp-tune-dts-plugin is pulled to the subproject, which not only recognizes the type of the remote component, but also compiles successfully and has a type prompt. References to remote components, methods, and so on, and hints, have a feel of service discovery on microservices.

👨 🔧 architecture

📦 Quick start

npm i @efox/emp-tune-dts-plugin or yarn add @efox/emp-tune-dts-plugin

👨🏻💻 uses plug-ins on Webpack

const { TuneDtsPlugin } = require('@efox/emp-tune-dts-plugin')
Copy the code

Method (1)(Recommended)

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.// Pass the function custom operation
          operation: operationDemo
        },
  ],
};
Copy the code

(2)

function operationDemo(fileData) {
  console.log(fileData)
  return fileData;
}
plugins: [
    new TuneDtsPlugin({
          output: path.join(createPath, createName),
          path: createPath,
          name: createName,
          isDefault:true.// Pass the function custom operation
          operation: operationDemo
        })
]
Copy the code

Parameter Description:

Parameter names type explain
output String (mandatory) D. ts File output directory
path String (mandatory) D. ts Folder path
name String (mandatory) Which s filename
isDefault Boolean (required) The relative path is replaced by an absolute path by default
operation Function (optional) Custom operation d.ts file function (if isDefault is true, operation inherits from the default Replace). The input parameter is the contents of the D. ts file. After the operation is complete, the D. ts data must be returned. For example operationDemo

💪 generated

  • After the Webpack Plugin is plugged in, the type files for the current Module Federation project generated by running Webpack will be saved in Dist

🔗 Remote reference

Method 1

yarn add @efox/emp-cli

Yarn EMP TSS Remote project address /index.d.ts -n Remote project name.d.ts

Method 2

Use the VSCode plugin: emp-sync-base

The last

EMP micro-front-end solution has been applied to 80% of our internal large-scale online projects, bringing significant benefits. In the process of practice, a complete scaffolding and plug-in ecosystem has been deposited, and some practical skills have been summarized for everyone to learn and explore together.

The tutorial directory for the EMP microfront-end solution is as follows:

  • Basic Knowledge analysis

    What is a micro front end

    Compare various microfront-end solutions

    Webpack5 Module Federation

    The design architecture of EMP

  • Quick start

    How does the React project use and access EMP

    How do VUE projects use and access EMP

    Tutorial on how to use auxiliary plug-ins

  • Advanced tutorial

    How do Vue and React projects call each other remotely

    How do COCOS2D projects use and access EMP

    Teach you base station building skills