vue.js - 捆绑使用 web worker 的汇总 Vue 组件

Question

我的问题很难描述清楚，所以希望你能理解我。

我正在尝试将 Vue 组件与汇总捆绑在一起并将其发布到 NPM 上。该组件使用一个函数，在该函数中创建一个像这样的 Worker

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

这在开发中工作得非常好，并且可以使用 vue build 命令构建：vue-cli-service build. 但是，理想情况下，我希望为此使用汇总，因为它可以生成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 组件（有或没有汇总？）。如果不是，您是否认为最好寻求一种解决方案，以某种方式从另一个文件从 Worker 导入脚本，或者我应该更多地研究将工作脚本内联到单个捆绑文件中的解决方案（也尝试过，虽然没有成功）

任何帮助将非常感激。下面是我的汇总配置，仅与 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 && 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);
}

标签： vue.jsnode-modulesweb-workerrollup