使用yarn安装的依赖项编译Typescript

Question

我在编译引用纱线安装包的打字稿代码时遇到一些问题。 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 和纱线安装依赖项的文档。或者甚至 typescript 编译器也可以使用纱线吗？也许我遗漏了一个生成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": "[email protected]",
  "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 文档：

TypeScript 也使用自己的解析器。在这种情况下，情况有点复杂 - TS 团队对允许第三方钩子进入 tsc 编译器有一些担忧，这意味着我们目前无法使用它。话虽这么说，TypeScript 不仅仅是 tsc，因此我们已经能够为流行的 ts-loader 添加 PnP 支持 - 这意味着只要您通过 Webpack 编译 TypeScript，一切都会正常运行！请参阅有关它的专门部分以获取更多信息。

要在使用 Typescript 时启用纱线包解析，您必须将 webpack 与 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": "[email protected]",
  "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 的基础知识。

Answer 2

FWIW，iamkneel 上面的答案对我有用。我有一个使用 Typescript 的 Express 应用程序，并使用纱线进行设置。在

nodeLinker: node-modules

文件中设置

.yarnrc.yml

解决了编译问题。