使用 yarn 安装依赖项编译 Typescript

Question

我在编译 typescript 代码时遇到了一些麻烦，它引用了 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 的依赖项一起使用的文档。或者甚至打字稿编译器也可以使用纱线？也许我遗漏了一个生成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

正如我在原始问题中提到的，来自yarn documentation：

TypeScript 也使用自己的解析器。在这种情况下，情况有点复杂——TS 团队担心在 tsc 编译器中允许第三方挂钩，这意味着我们目前无法使用它。话虽如此，TypeScript 不仅仅是 tsc，因此我们已经能够为流行的 ts-loader 添加 PnP 支持——这意味着只要你通过 Webpack 编译你的 TypeScript，一切都会运行良好！有关详细信息，请参阅有关它的专门部分。

要在使用 Typescript 时启用纱线包解析，您必须使用带有 ts-loader 的 webpack。我就是这样解决的。

• 安装必要的依赖项：

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 的基础知识。