cube.js 的playground 是可以修改的（开源，自定义），但是因为有依赖，所以很多时候直接使用是不行的
解决方法
- 使用npm 的shrinkwrap进行依赖的改写
- 使用yarn 具体与npm 类似
- 自己编译一个版本，使用私服进行替换
- 自己编译playground 添加一个自己的静态website
参考实践
我比较推荐的方法是自己构建playground 然后基于cube.js 提供的扩展点进行静态资源的提供，以下是参考使用
- 构建playground
clone代码然后结合自己的要求修改playground的代码，然后进行构建（构建难度不大，就是普通的web构建） - 基于cube.js 的扩展改写一个静态playground 的入口
需要依赖serve-static （参考了官方代码）
index.js
const serveStatic = require('serve-static');
const path = require("path")
module.exports = function (app) {
// 自定义的playground，位置在cube app 的playground 目录
app.use(serveStatic(path.join(__dirname, './playground'), {
lastModified: false,
etag: false,
setHeaders: (res, url) => {
if (url.indexOf('/index.html') !== -1) {
res.setHeader('Cache-Control', 'no-cache');
}
}
}));
}
cube.js
// Cube.js configuration options: https://cube.dev/docs/config
const index = require("./index")
module.exports = {
initApp:index
};
- 运行效果
playgrpound 构建几个问题
playground 构建可能会有几个问题（less版本问题,rollup 版本问题）
- less 版本问题
版本太高了，出现这个问题https://github.com/ant-design/ant-design/issues/7927#issuecomment-372513256，解决方法，可以使用一个旧版本的
比如"less": "^2.7.3" - rollup 版本问题
rollup 至少2以上，"rollup": "^2.40.0"，构建的时候会有提示
参考资料
https://cube.dev/docs/@cubejs-backend-server
https://docs.npmjs.com/cli/v7/commands/npm-shrinkwrap
https://classic.yarnpkg.com/en/docs/selective-version-resolutions/
https://stackoverflow.com/questions/40226639/how-do-i-override-nested-dependencies-with-yarn/41082766#41082766
https://nodejs.org/en/blog/npm/managing-node-js-dependencies-with-shrinkwrap/
https://www.cnblogs.com/rongfengliang/p/14691321.html