不下载npm包到本地项目,如何动态加载npm包?

新手上路,请多包涵

问题描述

目前想做一个根据配置json来生成页面的项目,倾向于使用react来构建这个项目。
大体是想完成这样的一件事情,从后端获取一个json对象,前端根据这个json对象渲染对应的组件

{
  page:{
    width: 1920,
    height: 1080
  },
  components: [
    'Button': {
      attr: {
        width: 100,
        height: 20,
      },
      config: {
        content: '测试按钮',
      }
    },
    'Table':{
      attr: {
        width: 200,
        height:100,
      },
      data: 'xxx',
    }
  ]
}

前端拿到这样一个json,在页面渲染一个宽100,高20,内容为"测试按钮"的Button组件,渲染一个宽200,高100的表格。
目前的实现思路是通过import()来动态引入组件,

import('Button').then()

但问题是如果有100个npm的react组件,那100个组件都需要下载到项目里面,并且会存在版本问题,比如说有些页面在用Button组件的0.1版本,有些页面需要用Button组件的0.3版本,就没办法去区分。

所以说知道能不能 在 代码中 去动态引入npm react组件包,并且使用。或者把单独的react组件以src的方式引入到项目中?

看到过别人的方案,是采用的js编写的组件,该组件会生成相应的dom结构以及css以及js的逻辑,动态加载一个js就可以了,但我想用react的方式去编写组件,所以提出上面的问题。

或者有其他更好的技术方案吗?

阅读 1.5k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题