Как заменить изображения и файлы при сборке, не ссылаясь на них в приложении? - PullRequest
Новая
       13

Как заменить изображения и файлы при сборке, не ссылаясь на них в приложении?

0 голосов
/ 14 февраля 2020

Мы переписываем нашу существующую Angular 8 PWA в Vuejs, и мы столкнулись с несколькими проблемами, касающимися процесса сборки. (Мы здесь не для того, чтобы обсуждать причины такого выбора и чье-либо мнение о нем)

Наше приложение должно быть создано для разных клиентов с указанными c активами для каждого клиента (манифест. json файл, значки и изображения).

В Angular мы выполняем sh замену файла, определяя правила в angular. json файле, используя ключ fileReplacements, например: 

"configurations": {
        "production-customer-a": {
          "fileReplacements": [
            {
              "replace": "src/manifest.json",
              "with": "src/environments/customer-a/assets/manifest.json"
            },
          ],
          // Some more json stuff

Мы попытались реализовать аналогичный процесс в нашем vue приложении в vue .config. js, используя веб-пакет NormalModuleReplacementPlugin, например: 

configureWebpack: () => {
let plugins;
switch (customer) {
  case customer-a:
    plugins = [
      new NormalModuleReplacementPlugin(
        /\.\.\/public\/manifest\.json/,
        "../environments/customer-a/assets/manifest.json"
      ),
     // Some more config

Это прекрасно работает, если заинтересованный на файлы фактически ссылаются в приложении , используя его URL при сборке . Позвольте мне объяснить на примере: 

<img src="@/assets/myImageWhichShouldBeReplacedAtBuild.png" /> /* Will actually be replaced and the dist folder will contain the file properly */
<img src="@/assets/myImageWhichShouldBeReplacedAtBuildButIsBase64EncodedWithWebpackUrlLoader.png" /> /* Will be replaced as the base64 string but the dist folder wont contain the file and might be an issue if the image is to be used by files like manifest.json */

Последнее не является полной проблемой, поскольку мы можем переопределить url-загрузчик веб-пакета в vue .config. js , как объяснено здесь, Но все же это хороший улов:

Поскольку в шаблонах Vue мы не ссылаемся на такие файлы, как manifest. json или favicon.ico, эти файлы не заменяются .

Есть ли какой-нибудь способ убедиться, что каждый файл , который нам нужен, будет заменен при сборке для получения того же результата, что и angular. *1045*. json файл конфигурации? Может быть, использовать что-то отличное от NormalModuleReplacementPlugin?

1 Ответ

0 голосов
/ 17 февраля 2020

Таким образом, для любой потерянной души, которая приходит сюда, нам удалось найти правильное решение.

Мы избавились от NormalModuleReplacementPlugin веб-пакета и работали в сочетании с исполнителем задач (в нашем случае gulp) и Vue stati c обработка активов.

Поскольку соответствующие активы всегда одинаковы, мы помещаем стандартные по умолчанию в папку publi c решения и воссоздаем ту же структуру в папках наших сред для каждого customer. 

-public
--img
---icons

-environments
--customer
---img
----icons

Используя правило преобразования URL Vue , мы связали все наши ресурсы в приложении с абсолютным путем, поэтому файлы не будут go через обработку веб-пакетов. После сборки мы запускаем наш gulpfile, который берет все активы клиента (переданные в качестве аргумента) и переопределяет их в папке dist.

gulpfile. js: 

const gulp = require('gulp');
const yargs = require('yargs').argv;

gulp.task('moveassets', () => {
  return gulp.src(`environments/${yargs.customer}/**/**/**`)
    .pipe(gulp.dest('dist'));
})

package. json script: 

"build:customer": "vue-cli-service build && gulp moveassets --customer customer"

Это может привести к небольшим проблемам с обработкой кэша, поскольку webpack мог бы помещать хэши в файлы, но Angular также не делает этого, поэтому это не изменит наших привычек. .

...