Могу ли я сделать javascript dynamici c import синхронным или мне все равно? - PullRequest
Новая
       42

Могу ли я сделать javascript dynamici c import синхронным или мне все равно?

0 голосов
/ 16 марта 2020

В другой вопрос Я попросил способ динамического вывода списка содержимого исходной папки (т. Е. Для заполнения содержимого компонента React на основе классов из папки), и один ответ предложил API Webpack require.context.

Я написал следующий код: 

const basenam = '.';

let ctx = require.context('.', true);

console.log(ctx.keys())

ctx.keys().forEach( /*async */function (key)// =>

      {
        console.log(typeof key + ": " + key)

        try {
            let mod = /*await*/ import(key + '')

            .then( mod => {
                console.log('Imported ' +  key)

                if(Object.keys(mod).includes("default")) {
                    console.log('\tcreating ' + key)
                    console.log((new mod.default()).state)
                }
            })

            .catch(
                 e => {
                     console.log('Import failed ' + key);
                     // console.log(e)
                }
            )

        } catch(e) {
            console.log('Import failed ' + key);
        }
    }
)

, который выдает следующий вывод: 

...
["./HomePage/HomePage", "./HomePage/HomePage.js", "./HomePage/HomePage.style", "./HomePage/HomePage.style.js", "./PageIndexer", "./PageIndexer.js", "./PageIndexer2", "./PageIndexer2.js"]
...
Imported ./HomePage/HomePage
    creating ./HomePage/HomePage
{x: 10}
Imported ./HomePage/HomePage.js
    creating ./HomePage/HomePage.js
{x: 10}
Imported ./HomePage/HomePage.style
Imported ./HomePage/HomePage.style.js
Imported ./PageIndexer
Imported ./PageIndexer.js
Imported ./PageIndexer2
    creating ./PageIndexer2
Imported ./PageIndexer2.js
    creating ./PageIndexer2.js
Import failed ./PageIndexer2
Import failed ./PageIndexer2.js

Игнорирование этих как и Import failed ./PageIndexer2, соответствующие строки - это {x: 10}, которые демонстрируют правильную загрузку объекта и читаемость его свойств.

У меня два вопроса:

  1. почему я получаю Uncaught TypeError: __webpack_require__(...).context is not a function если я заменим let ctx = require.context('.', true); на let ctx = require.context(basenam, true); (используя переменную basenam из строки previuos?
  2. , поскольку это будет go в компоненте React, у меня могут возникнуть проблемы, когда приложение станет больше с почти любой другой компонент вместо этого статически импортируется?

Я пытался использовать async / await, но я получил ошибку Can not use keyword 'await' outside an async function (вероятно, потому что функция аргумента forEach() должна быть asyn c aswell), хотя кажется мне б он способен .

. Это будет go в компоненте React, который среди других компонентов

...