构建自己的cube.js playground

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