Строковый литерал в динамическом импорте Webpack - PullRequest
Новая
       21

Строковый литерал в динамическом импорте Webpack

0 голосов
/ 06 октября 2018

Я использую динамический импорт для создания фрагментов всех локалей в проекте.Чанки созданы, но клиент сообщает об этой ошибке во время выполнения: 

Uncaught (in promise) ReferenceError: locale is not defined
  at _callee$ (main.js?f161:72)
  at tryCatch (runtime.js?98b8:62)
  at Generator.invoke [as _invoke] (runtime.js?98b8:288)
  at Generator.prototype.(:8082/d2/v2/search/anonymous function) [as next] (webpack-internal:///./node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:114:21)
  at asyncGeneratorStep (asyncToGenerator.js?c973:3)
  at _next (asyncToGenerator.js?c973:25)

Код, о котором идет речь: 

// main.js
import { locale } from './config';

(async () => {
  const formatter = new Formatter({ locale });
  const i18n = new VueI18n({
    locale,
    formatter,
  });

  // Prints "en-GB", for example, so it's *not* undefined
  console.log(locale);

  const messages = await import(
    /* webpackChunkName: "[request]" */
    `./locales/${locale}/translations.js`, // <= Error
  );
  i18n.setLocaleMessage(locale, messages);

  new Vue({
    el: '#app',
    router,
    i18n,
    render: h => h(App),
  });
})();

Конфигурация Babel: 

"babel": {
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-object-rest-spread",
      {
        "useBuiltIns": true
      }
    ],
    "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-async-to-generator",
    "@babel/plugin-syntax-dynamic-import"
  ]
},

Языкэкспортируется следующим образом: 

// config.js
export const locale = process.env.LOCALE; // e.g. "en-GB"

Изменение пути импорта на что-то статическое, например ./locales/en-GB/translations.js, работает.

Редактировать

Это начало работать, когда я переназначил locale к промежуточной переменной, как показано ниже: 

(async () => {
  // ...

  const tempLocale = locale;

  // Passing `locale` here won't work, but `tempLocale` does...
  const messages = await import(
    /* webpackChunkName: "[request]" */
    `./locales/${tempLocale}/translations.js`,
  );

  // `locale` is accepted just fine here, for some reason
  i18n.setLocaleMessage(locale, messages);

  // ...
})();

Я также заметил, что при проверке переменной locale в отладчике, которая за пределами IIFE разрешается в фактическую строку ("en-GB"), но внутри разрешается в модуль, в котором содержится переменная locale.Очень запутанно, и это решение кажется слишком хакерским, чтобы быть приемлемым.?

...