имена модулей Webpack и vue-cli при создании библиотеки

TL; DR;

Как переименовать webpackChunkName в vue-cli в --target lib режиме?


Привет, ребята, я создаю библиотеку для Vue js с vue-cli.

Эта строка производит вывод моей библиотеки в umd, umd.min и common-js:

vue-cli-service build --target lib --name mylib ./src/components/mylib.vue --dest ./dist

Поскольку моя библиотека имеет асинхронные модули (локали i18n в файлах json), я хочу изменить Webpack, чтобы контролировать вывод всех файлов в конечной папке dist, но это не удалось.

Прежде чем я перенесу все файлы локалей для производительности, у меня было следующее:

dist/
|- mylib.common.js
|- mylib.umd.js
|- mylib.umd.min.js
|- mylib.css

Теперь, когда локаль импортируется по запросу с:

import(/* webpackInclude: /\.json$/, webpackChunkName: "[request]" */ `./i18n/${locale}`)
    .then(response => (this.texts = response.default))

Это результат:

dist/
|- mylib.common.js
|- mylib.umd.js
|- mylib.umd.min.js
|- mylib.css
|- en.common.min.js
|- en.umd.js
|- en.umd.min.js
|- es.common.min.js
|- es.umd.js
|- es.umd.min.js
|- de.common.min.js
|- de.umd.js
|- de.umd.min.js
...

В идеале я хотел бы получить только один файл языковых стандартов для всех версий моей библиотеки, поскольку сгенерированные файлы языковых стандартов точно такие же для umd и common-js и организованы в такая папка:

dist/
|- mylib.common.js
|- mylib.umd.js
|- mylib.umd.min.js
|- mylib.css
|- i18n
   |- en.js
   |- es.js
   |- de.js
   ...

Я попытался настроить импорт webpack magic comment, но получил 3 папки i18n, как показано ниже :

import(/* webpackInclude: /\.json$/, webpackChunkName: "i18n/[request]" */ `./i18n/${locale}`)
    .then(response => (this.texts = response.default))
dist/
|- mylib.common.
   |- i18n
   |- en.js
|- mylib.umd.
   |- i18n
   |- en.js
|- mylib.umd.min.
   |- i18n
   |- en.js

Когда я добавляю это в свой vue.config.js, он изменяет сборку моей документации на docs/ (vue-cli-service build), но не работает для моей библиотеки в dist/ (vue-cli-service build --target lib):

  configureWebpack: {
    output: {
      filename: '[name].testing-bundle.js',
      chunkFilename: '[name].testing-bundle.js'
    }
  },

person antoni    schedule 30.03.2019    source источник


Ответы (1)


Наконец-то я нашел подходящее решение!

В итоге я добавил сценарий postbuild (запускаемый автоматически после сборки) следующим образом:

"postbuild-bundle": "rm -rf ./dist/libname.common.i18n ./dist/libname.umd.i18n && mv ./dist/libname.umd.min.i18n ./dist/i18n"

Надеюсь, это может кому-то помочь.

person antoni    schedule 05.06.2019