Почему шаг browserify в процессе сборки gulp компилирует мой машинописный код веб-работника? - PullRequest
Новая
       111

Почему шаг browserify в процессе сборки gulp компилирует мой машинописный код веб-работника?

0 голосов
/ 29 января 2020

Я пытаюсь настроить веб-работника в проекте React / Typescript, который использует Gulp с Browserify для сборки. Это оказывается довольно трудным делом. Проблема, с которой я столкнулся на данный момент, заключается в том, что на этапе компиляции машинописи для основного приложения делается попытка включить код веб-работника. Это терпит неудачу, потому что для машинописи веб-работника нужны другие типы, чем для остального кода - типы DOM не допускаются. Но я не понимаю, как этот код включается в компиляцию вообще. Что касается моего понимания browserify, оно рассматривает зависимости, указанные в файле root, и строит оттуда дерево зависимостей. Это дерево никогда не должно ссылаться на файл веб-работника и его код, так что происходит?

Код Gulp: 

const compileMainScript = (done) => {
  log('Compiling script for my-app');
  return browserify({
    basedir: '.',
    debug: mode === 'dev',
    entries: ['src/my-app/my-app.tsx'],
    cache: {},
    packageCache: {},
  })
    .plugin(tsify)
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('*path-to-destination-folder*'))
    .on('error', err => {
      console.error(err.toString());
      done(err);
    });
};

(Упрощенная) структура каталогов выглядит примерно так: 

-src
  -workers
    my-worker.ts
  -my-app
    my-app.tsx

Таким образом, вы можете видеть, что создаваемое приложение (my-app) и веб-работник находятся в путях на одном уровне - даже если код веб-рабочего находится внутри папки my-app. Как browserify даже может увидеть это? Обратите внимание, что в my-app нет ссылок на my-worker. Я могу произвольно изменить имя папки или файла рабочего файла, и возникает та же проблема.

1 Ответ

1 голос
/ 11 февраля 2020

Я не знаком с browserify + tsify build config. Но я знаю, что компилятор TS по своему дизайну учитывает весь проект при компиляции, в отличие от однофайловой стратегии babel.

Мне кажется, ваша проблема возникает, потому что компилятор ts принимает рабочий файл как часть проэкт. Вам необходимо исключить из своего проекта.

Вы можете поэкспериментировать с полем «исключить» в tsconfig.json или попробовать следующее в соответствии с документами tsify : 

browserify({ ... }).plugin(tsify, { files: [] })

tsify поддерживает переопределение файлов, параметры исключения и включения. В частности, если указано «files»: [], в TypeScript для компиляции передаются только точки входа Browserify (и их зависимости).

...