使用 yarn 安装依赖项编译 Typescript

Posted 2023-02-16

【中文标题】使用 yarn 安装依赖项编译 Typescript

【英文标题】：Compiling Typescript with dependencies installed with yarn

【发布时间】：2021-11-18 08:04:02

【问题描述】：

我在编译 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 文件夹中。

【问题讨论】：

您是否在“tsc”之前运行过“yarn install”？

是的，我运行了 yarn install。我做了更多的研究，似乎 tsc 不支持 yarn PnP。使用带有 ts-loader 的 webpack 应该可以解决问题。 docs 引导我得出这个结论。敬请关注。也许我可以自己解决这个问题。

如果自己无法解决，可以随时在.yarnrc中设置nodeLinker: node-modules

【参考方案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 的基础知识。