Блог

Я хочу импортировать динамически реагирующий компонент Typescript из подстановочного пути, как показано ниже:-

 const Component = loadable(
  () => import(`../../../src/**/*/${component_name}`),
);
  

Можно ли импортировать, как указано выше, используя подстановочный знак?

В Stackoverflow найдено множество решений, но ничто не соответствует требованиям.

Любая помощь будет высоко оценена.

Вы должны использовать React.для lazy и Webpack требуется

 import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

// registry for components
const components = {}

// Create component
const makeComponent = (path) => React.lazy(() => import(`${path}`));


// Get paths (Webpack)
const requireComponent = require.context(
  '../../../components', // components folder
  true, // look subfolders
  /w .([jt]sx)$/ //regex for files
)

requireComponent.keys().forEach(filePath => {
  // Get component config
  const Component = makeComponent(filePath);

  // Get PascalCase name of component
  const componentName = upperFirst(
    camelCase(
    // Gets the file name regardless of folder depth
     filePath
      .split('/')
      .pop()
      .replace(/.w $/, '')
   );

  components[componentName] = Component;
)
  

Это решение может потребовать перезапуска Webpack после каждого нового компонента, который вы добавляете в
папку components .
Имена компонентов (в нашем случае они же имена файлов) должны быть uniq.
Реагируйте.ленивый обязательный экспорт по умолчанию

Решение, основанное на:

1. https://reactjs.org/docs/code-splitting.html
2. https://v2.vuejs.org/v2/guide/components-registration.html