Компиляция Typescript с установленными зависимостями с помощью yarn

Question

У меня проблемы с компиляцией кода машинописного текста со ссылками на установленные пакеты пряжи. Tsc не может найти пакеты, потому что yarn использует систему Plug And Play.

Ошибка tsc:

      src/main.ts:1:36 - error TS2307: Cannot find module 'electron'.

1 import { app, BrowserWindow } from 'electron';
                                     ~~~~~~~~~~

src/main.ts:2:18 - error TS2307: Cannot find module 'node:path'.

2 import path from 'node:path';
                   ~~~~~~~~~~~

src/main.ts:8:42 - error TS2304: Cannot find name '__dirname'.

8     webPreferences: { preload: path.join(__dirname, 'preload.js') },
                                           ~~~~~~~~~

src/main.ts:23:7 - error TS2580: Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i @types/node`.

23   if (process.platform !== 'darwin') app.quit();
         ~~~~~~~

src/preload.ts:1:21 - error TS2307: Cannot find module 'node:process'.

1 import process from 'node:process';
                      ~~~~~~~~~~~~~~


Found 5 errors.

Я совершенно новичок в пряже и хотел ее проверить.

Мне что-то не хватает в моих конфигурациях? Обыскал повсюду, но не смог найти никакой документации об использовании Typescript с установленными зависимостями yarn. Или даже компилятор машинописного текста работает с пряжей? Может быть, я пропустил команду для создания node_modules? Весь смысл использования пряжи заключался в том, чтобы уйти от этого.

tsconfig:

      {
  "compilerOptions": {
    "lib": ["es2020", "DOM"],
    "module": "es2020",
    "moduleResolution": "Node",
    "target": "es2020",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "sourceMap": false,
    "removeComments": true,
    "preserveConstEnums": true,
    "outDir": "dist",
    "baseUrl": ".",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "include": ["src/**/*"]
}

package.json:

      {
  "name": "ElectroMega",
  "packageManager": "yarn@3.0.2",
  "private": true,
  "devDependencies": {
    "typescript": "^4.4.3"
  },
  "dependencies": {
    "@tsconfig/node14": "^1.0.1",
    "@types/node": "^16.9.6",
    "electron": "^14.0.1"
  }
}

Мои исходные файлы находятся в папке src в корне.

Answer 1

Как упоминается в моем комментарии в исходном вопросе, из документации пряжи :

TypeScript также использует свой собственный преобразователь. В этом случае ситуация немного сложнее - у команды TS есть некоторые опасения по поводу разрешения сторонних хуков внутри компилятора tsc, а это означает, что мы не можем работать с ним в данный момент. При этом TypeScript - это не только tsc, и поэтому мы смогли добавить поддержку PnP в популярный ts-loader - это означает, что пока вы компилируете свой TypeScript через Webpack, все работает хорошо! Обратитесь к соответствующему разделу об этом для получения дополнительной информации.

Чтобы включить разрешение пакета пряжи при использовании Typescript, вы должны использовать веб-пакет с ts-loader. Вот как я это решил.

• установите необходимые зависимости:

npm install webpack webpack-cli pnp-webpack-plugin ts-loader

• Создайте файл webpack.config.js в корневом каталоге вашего проекта со следующим содержимым:

      const path = require('path');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

const commonConfig = {
  mode: 'development',
  devtool: 'source-map',
  plugins: [
    new NodePolyfillPlugin(),
  ],
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  node: {
    __dirname: false,
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    plugins: [PnpWebpackPlugin],
  },
  resolveLoader: {
    plugins: [PnpWebpackPlugin.moduleLoader(module)],
  },
};

module.exports = [
  Object.assign(
    {
      target: 'electron-main',
      entry: { main: './src/main.ts' },
    },
    commonConfig
  ),
  Object.assign(
    {
      target: 'electron-renderer',
      entry: { preload: './src/preload.ts' },
    },
    commonConfig
  ),
];

• Я обновил свой package.json скриптами для запуска webpack:

      {
  "name": "ElectroMega",
  "packageManager": "yarn@3.0.2",
  "private": true,
  "scripts": {
    "build": "webpack",
    "prestart": "yarn run build",
    "start": "electron ./dist/main.js"
  },
  "devDependencies": {
    "html-webpack-plugin": "^5.3.2",
    "node-polyfill-webpack-plugin": "^1.1.4",
    "pnp-webpack-plugin": "^1.7.0",
    "ts-loader": "^9.2.6",
    "typescript": "^4.4.3",
    "webpack": "^5.54.0",
    "webpack-cli": "^4.8.0"
  },
  "dependencies": {
    "@tsconfig/node14": "^1.0.1",
    "@types/node": "^16.9.6",
    "electron": "^14.0.1"
  }
}

• Затем вы сможете создать свой код с помощью команды:

yarn build

Мое решение было результатом следования разделу « с веб- Начало работыпакетом », в котором объяснялись многие мои проблемы и основы использования веб-пакета.