不会开发插件? 那还用什么Umi呢? - UmiJS自定义插件开发和使用正如UmiJS官网所说 “umi 一个企业级,插

正如UmiJS官网所说

“umi 一个企业级,插件化框架，啥都能改，Umi 本身也是由插件构成”

但是有多少人在实际开发中,也就是把Umi当成一个不用写路由,一键配置layout的React使用呢?

当然我们知道,这玩意又重又大,毫不夸张的说就是一前端坦克。

所以我们既然用了这么重的东西,那么就要好好利用其本身提供的功能,不然就亏麻了。

插件

在UmiJS.2x官方文档中,对插件的使用说明看似详细,实际混乱不堪,新人完全看不懂。本人在刚开始学习的时候也是一头雾水。在这里整理一下umi的自定义插件的开发和使用。

开发和使用Umi插件案例

Umi提供了多个Hook API , 使用插件配置这些Hook,Umi在运行/打包时会在对应时刻执行这些Hook，
下面我们来写一个小的需求:在打包时添加一个额外的js文件到dist中。

根目录下新建plugins/plugin01.ts文件
插件模块默认接收一个参数api 里面有各种hook可供调用(更多api:插件 API | UmiJS)

//plugins/plugin01.ts
import { IApi } from 'umi';
// 插件模块默认接收一个参数api 里面有各种hook可供调用
export default function (api: IApi) {
  // 使用api.addHTMLHeadScripts方法,打包时给html文件的head中添加一个script标签和内容
 api.addHTMLHeadScripts(() => `console.log('新添加的代码')`)
}

使用此插件一般在Umi的config中使用插件使用require引入插件

// config.ts
// 插件的使用顺序跟webpack一样  是从下往上依次执行
export default defineConfig({
      plugins: [
      require.resolve('../plugins/plugin02.ts') //后执行
      require.resolve('../plugins/plugin01.ts') //先执行
      ],
})

npm run build打包umi项目在index.html的header中就会多出一个script标签

<!DOCTYPE html>
  <head>
  ...
    <script>
     console.log('新添加的代码')
    </script>
  </head>

官方资料:

插件 API | UmiJS

开发插件 | UmiJS