Блог

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

Ошибка 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. Или даже компилятор машинописного текста работает с 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/**/*"]
}


 

пакет.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 в корне.

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

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

Чтобы включить разрешение пакета yarn при использовании Typescript, вам необходимо использовать webpack с загрузчиком ts. Вот как я решил эту проблему.

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

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

Мое решение было результатом следования разделу webpack GettingStarted, в котором объяснялась большая часть проблем, с которыми я столкнулся, и основы использования webpack.