Модули называют Webpack & Vue-Cli при создании библиотеки - PullRequest
Новая
       2

Модули называют Webpack & Vue-Cli при создании библиотеки

0 голосов
/ 30 марта 2019

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'
    }
  },

1 Ответ

0 голосов
/ 05 июня 2019

Я наконец нашел подходящий обходной путь!

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

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

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

...