Webpack worker-loader не может скомпилировать рабочий текст - PullRequest
Новая
       31

Webpack worker-loader не может скомпилировать рабочий текст

0 голосов
/ 07 мая 2018

Я настраиваю свой проект, как описано в документации worker-loader , и мне удалось заставить код TS работать с использованием правильного d.ts.

Однако во время сборки веб-пакета еговыдает ошибку, и я не понимаю, почему. 

 ERROR in ./src/test.worker.ts
Module parse failed: Unexpected token (1:9)
You may need an appropriate loader to handle this file type.
| const ctx: Worker = self as any;
| ctx.addEventListener('message', event => {
|   console.log(event);

Содержимое моего рабочего файла test.worker.ts: 

const ctx: Worker = self as any;
ctx.addEventListener('message', event => {
  console.log(event);
  setTimeout(() => ctx.postMessage({
    foo: 'boo'
  }), 5000);
});

Заявка index.ts

import TestWorker from './test.worker.ts';

const test = new TestWorker();
test.postMessage({});

И наконец вот мой webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const DIR_SOURCE = path.resolve(__dirname, 'src');
const DIR_BUILD = path.resolve(__dirname, 'build');

module.exports = {

  entry: `${DIR_SOURCE}/index.tsx`,

  output: {
    path: DIR_BUILD,
    filename: 'project.bundle.js'
  },

  devtool: "source-map",

  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".json"]
  },

  module: {
    rules: [
      {test: /\.tsx?$/, loader: "ts-loader" },
      {test: /\.worker\.ts$/, use: ['ts-loader', 'worker-loader'] },
      {test: [/\.vert$/, /\.frag$/], use: 'raw-loader'},
      {test: /\.(png|jpg|gif|svg)$/, use: {loader: 'file-loader', options: {}} },
      {test: /.*\.sass/, use: ['style-loader', 'css-loader', 'sass-loader'] },
    ]
  },

  plugins: [
    new webpack.DefinePlugin({
      'CANVAS_RENDERER': JSON.stringify(true),
      'WEBGL_RENDERER': JSON.stringify(true)
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.ejs'
    }),
  ]
};

Любая помощь очень ценится.

Спасибо:)

Ответы [ 3 ]

0 голосов
/ 23 ноября 2018

Спасибо, Дмитрий, вы помогли мне продвинуться вперед в том, чтобы заставить работника-загрузчика построить мой проект Typescript.

Несмотря на это, у меня было еще три проблемы, которые мне нужно было решить, чтобы заставить его работать:

  • Сборка зависала, когда я добавлял worker-loader выше ts-loader / awesome-typescript-loader.Я исправил это, сделав пути импорта более специфичными для типов, которые были импортированы / экспортированы из модуля веб-работника.Я выяснил это, пытаясь закомментировать содержимое файла ввода веб-работника, а затем раскомментировать по одной строке за раз, чтобы увидеть, что будет и не будет построено.

  • Второйчто я сделал неправильно, так это то, что я добавил работник-загрузчик, как правило, в мой конфиг веб-пакета и в оператор импорта.Я в основном дважды запускал worker-loader на модуле web-работника.Doh.Так что либо добавьте работник-загрузчик в конфигурацию вашего веб-пакета, либо добавьте 'работник-загрузчик!'к заявлению на импорт / требование.Я добавил worker-loader в свой конфиг webpack и просто импортировал вот так: import MyWorker = require('./my-worker');

  • Я получил typeerror MyWorker is not a constructor, когда пытался создать новый MyWorker (), и мне пришлосьприведите MyWorker к любому для проверки типа Typescript, чтобы проглотить его: new (MyWorker as any)();

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

0 голосов
/ 12 августа 2019

Если вы используете TypeScript со ссылками на проект, добавьте options: {projectReferences: true } в ts-loader config веб-пакета: 

  module: {
    rules: [
      { test: /\.worker\.ts$/, loader: 'worker-loader' },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {projectReferences: true }
      }
    ]
  },

Подробнее в readme ts-loader здесь .

Это не дает прямого ответа на опубликованный вопрос, но эта страница - самая популярная в google для проблем с ts-loader.

0 голосов
/ 07 мая 2018

Хорошо, я понял это.

Сначала мне нужно было переместить загрузчик работника до ts-загрузчика, и мне не нужно было указывать массив в свойстве работника use и просто хранить его, как описано в документации для worker-loader. 

module: {
    rules: [
      {test: /\.worker\.ts$/, loader: 'worker-loader'},
      {test: /\.tsx?$/, loader: "ts-loader" },
      {test: [/\.vert$/, /\.frag$/], use: 'raw-loader'},
      {test: /\.(png|jpg|gif|svg)$/, use: {loader: 'file-loader', options: {}} },
      {test: /.*\.sass/, use: ['style-loader', 'css-loader', 'sass-loader'] },
    ]
  },

Тогда в моем работнике мне также нужно было экспортировать что-либо, иначе машинопись (2.8.3) жаловалась бы на то, что он не может найти модуль, и я export default null as any, чтобы не запутать ts еще больше.

worker.js 

const ctx: Worker = self as any;
ctx.addEventListener('message', event => {
  console.log(event);
  setTimeout(() => ctx.postMessage({
    foo: 'boo'
  }), 5000);
});
export default null as any;

index.js 

import TestWorker from './test.worker.ts';
const test = new TestWorker('');
test.postMessage({});
...