Блог

мне сложно четко описать мою проблему, поэтому, надеюсь, вы меня поймете.

Я пытаюсь объединить компонент Vue с накопительным и опубликовать его в NPM. Компонент использует функцию, в которой a создает работника, подобного этому

 new Worker('@/workers/tree-traversal-worker.ts', { type: 'module' })
 

Это отлично работает при разработке и может быть создано с помощью команды сборки vue : vue-cli-service build . Однако в идеале я бы хотел использовать rollup для этого, поскольку он может генерировать формат esm.

Я пробовал несколько плагинов для свертки, а именно rollup-plugin-web-worker-loader, @qintx / rollup-plugin-web-worker-loader и rollup-plugin-web-worker-loader’. Самое большее, что я получил, это @surma/rollup-plugin-off-main-thread то, что успешно сгенерировал выделенный рабочий файл и new Worker(...) соответствующим образом изменил URL-адрес в пакете. Однако, когда я пытаюсь установить его в другой проект Vue, я получаю эту ошибку в консоли

 tree-traversal-worker-bc0e96e1.js:1 Uncaught SyntaxError: Unexpected token '<'
 

Если я правильно понимаю, это просто означает, что файл не был найден, поскольку он пытается разрешить скрипт с относительным путем /tree-traversal-worker-bc0e96e1.js , а не фактический файл, хранящийся в node_modules .

Итак, мои вопросы следующие. Кому-нибудь удалось каким-то образом связать компоненты Vue, использующие web workers (с накопительным компонентом или без него?). А если нет, как вы думаете, лучше ли искать решение, которое каким-то образом импортировало бы скрипт из Worker из другого файла, или мне следует больше изучить решение, которое объединяет рабочий скрипт в один объединенный файл (я тоже пробовал, но безуспешно)

Любая помощь будет высоко оценена. Ниже приведена моя конфигурация rollup, которая относится только к выходным данным в формате esm

 import fs from 'fs';
import path from 'path';
import vue from 'rollup-plugin-vue';
import alias from '@rollup/plugin-alias';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import babel from 'rollup-plugin-babel';
import minimist from 'minimist';
import postCSS from 'rollup-plugin-postcss';
import OMT from '@surma/rollup-plugin-off-main-thread';

const postcssConfig = require('../postcss.config');
const esbrowserslist = fs.readFileSync('./.browserslistrc')
  .toString()
  .split('n')
  .filter((entry) => entry amp;amp; entry.substring(0, 2) !== 'ie');

const argv = minimist(process.argv.slice(2));

const projectRoot = path.resolve(__dirname, '..');

const baseConfig = {
  input: 'src/performant-vue-tree.ts',
  plugins: {
    preVue: [
      alias({
        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue', '.css'],
        entries: {
          '@': path.resolve(projectRoot, 'src'),
        },
      }),
    ],
    replace: {
      'process.env.NODE_ENV': JSON.stringify('production'),
      'process.env.ES_BUILD': JSON.stringify('false'),
    },
    vue: {
      css: true,
      compileTemplate: true,
      style: {
        postcssPlugins: [...postcssConfig.plugins],
      },
    },
    /*
    * Has to be used for processing postcss in general
    * Does not resolve postcss in SFC. For that is vue.style.postcssPlugins
    */
    postCSS: {
      extract: false,
      plugins: [],
    },
    babel: {
      runtimeHelpers: true,
      exclude: 'node_modules/**',
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
    },
  },
};

const external = [
  'vue',
  'lodash',
  'promise-worker',
  'json-fn',
  '@clr/icons',
  '@clr/icons/shapes/all-shapes',
  'vue-virtual-scroller',
  'vuex',
  'vue-wait',
];

// Customize configs for individual targets
const buildFormats = [];
if (!argv.format || argv.format === 'es') {
  const esConfig = {
    ...baseConfig,
    external,
    output: {
      dir: 'dist',
      format: 'esm',
      exports: 'named',
    },
    plugins: [
      OMT({
        useEval: true,
        format: 'esm',
      }),
      postCSS(baseConfig.postCSS),
      replace({
        ...baseConfig.plugins.replace,
        'process.env.ES_BUILD': JSON.stringify('true'),
      }),
      ...baseConfig.plugins.preVue,
      vue(baseConfig.plugins.vue),
      babel({
        ...baseConfig.plugins.babel,
        presets: [
          [
            '@babel/preset-env',
            {
              targets: esbrowserslist,
            },
          ],
        ],
      }),
      commonjs(),
    ],
  };
  buildFormats.push(esConfig);
}