🎉 我们正在招聘远程 全栈开发工程师测试工程师技术培训与文档专家,欢迎加入

NocoBase 0.12:全新的插件构建工具

NocoBase 0.12 版本引入了全新的插件构建工具以便直接在生产环境中使用,更新了安装方法,并合并了 @nocobase/app-client 和 @nocobase/app-server 为 @nocobase-app。

NocoBase team|

新特性

全新的插件构建工具。构建好的插件将可以直接在生产环境上使用,无需二次构建。

应用升级

Docker 安装的升级

无变化,升级参考 Docker 镜像升级指南

源码安装的升级

插件构建工具已全新升级,在拉取新源码之后,需要清除缓存。

git pull # 拉取新源码
yarn clean # 清除缓存

更多详情参考 Git 源码升级指南

create-nocobase-app 安装的升级

通过 yarn create 重新下载新版本,再更新 .env 配置,更多详情参考 大版本升级指南

不兼容的变化

@nocobase/app-client 和 @nocobase/app-server 合并为 @nocobase-app

通过 create-nocobase-app 安装的应用不再有 packages/app 目录了,在 packages/app 里自定义的代码,需要移至自定义插件中。

app 的 dist/client 路径变更

如果是自己配置的 nginx,需要做类似调整

server {
- root /app/nocobase/packages/app/client/dist;
+ root /app/nocobase/node_modules/@nocobase/app/dist/client;

  location / {
-       root /app/nocobase/packages/app/client/dist;
+       root /app/nocobase/node_modules/@nocobase/app/dist/client;
        try_files $uri $uri/ /index.html;
        add_header Last-Modified $date_gmt;
        add_header Cache-Control 'no-store, no-cache';
        if_modified_since off;
        expires off;
        etag off;
    }
}

第三方插件需要重新构建

参考下文的第三方插件升级指南

第三方插件升级指南

插件目录必须同时有 src/clientsrc/server 目录

// src/client/index.ts
import { Plugin } from '@nocobase/client';

class MyPlugin extends Plugin {
  async load() {
    // ...
  }
}

export default MyPlugin;
// src/server/index.ts
import { Plugin } from '@nocobase/server';

class MyPlugin extends Plugin {
  async load() {
    // ...
  }
}

export default MyPlugin;

具体 Demo 代码可以参考:sample-hello

插件的多语言放置 src/locale 目录

无论前后端,多语言翻译文件都统一放在 src/locale 目录,插件无需自己加载多语言包。

插件依赖的调整

插件的依赖分为自身的依赖和全局依赖,全局依赖直接使用全局,不会打包到插件产物中,自身的依赖会被打包到产物中。插件构建之后,生产环境即插即用,无需再安装依赖或二次构建。插件依赖的调整包括:

  • @nocobase/* 相关包放到 peerDependencies 里,并指定版本号为 0.x
  • 其他依赖放到 devDependencies 里,不要放 dependencies 里,因为插件打包之后会将生产环境所需依赖全部提取了。
{
  "devDependencies": {
    "@formily/react": "2.x",
    "@formily/shared": "2.x",
    "ahooks": "3.x",
    "antd": "5.x",
    "dayjs": "1.x",
    "i18next": "22.x",
    "react": "18.x",
    "react-dom": "18.x",
    "react-i18next": "11.x"
  },
  "peerDependencies": {
    "@nocobase/actions": "0.x",
    "@nocobase/client": "0.x",
    "@nocobase/database": "0.x",
    "@nocobase/resourcer": "0.x",
    "@nocobase/server": "0.x",
    "@nocobase/test": "0.x",
    "@nocobase/utils": "0.x"
  }
}

插件的构建产物从 lib 目录变更为 dist 目录

dist 目录介绍

|- dist
  |- client       # 前端,umd 规范
    |- index.js
    |- index.d.ts
  |- server       # 后端,cjs 规范
    |- index.js
    |- index.d.ts
    |- 其他文件
  |- locale       # 多语言目录
  |- node_modules # 后端依赖

其他相关调整包括:

package.json 的 main 参数调整

{
  - "main": "./lib/server/index.js",
  + "main": "./dist/server/index.js",
}

client.d.ts

export * from './dist/client';
export { default } from './dist/client';

client.js

module.exports = require('./dist/client/index.js');

server.d.ts

export * from './dist/server';
export { default } from './dist/server';

server.js

module.exports = require('./dist/server/index.js');