如何在React / Nextjs应用程序中将多个import语句组合成一个语句？

Question

来处理SSR，而不是

import EditorJS from '@editorjs'

我正在做

const EditorJS = dynamic(
  () => import('react-editor-js'),
  { ssr: false }
)

我必须做同样的事情

import Header from '@editorjs/header';
import Embed from '@editorjs/embed'
import Table from '@editorjs/table'
import Paragraph from '@editorjs/paragraph'

有没有办法将所有的导入合并到一个动态导入中，而不是为每个导入做更多的导入？

const Header = dynamic(
  () => import('@editorjs/header'),
  { ssr: false }
)

Answer 1

使用所有库的名称创建一个数组，并使用动态常量名称导入它们：

imports = ['@editorjs/header', '@editorjs/embed', '@editorjs/table', '@editorjs/paragraph']; 

imports.forEach((value)=>{
    let name = value.slice(value.indexOf('/')+1);
    
    eval('const '+ name.charAt(0).toUpperCase() + name.slice(1) + ' = ' + "dynamic(() => import('" + value+ "'),{ ssr: false })" + ';');
})