typescript - "Module not found: Error: Can' 解决 Electron 和 typescript 和 webpack 项目中的 'electron-is-dev'"

Question

我在 webpack 中使用 Electron 和 Typescript。
我要添加 react.js。

但是我输入了“npx webpack”，我得到了一个错误。

它说“找不到 Electron 是开发模块”，但我已经安装了它。

 ERROR in ./src/main/window.ts
    Module not found: Error: Can't resolve 'electron-is-dev' in 'project-path/src/main'
     @ ./src/main/window.ts 2:0-36 12:35-40
     @ ./src/main/app.ts

我找不到如何解决这个错误。

窗口.ts

import { app, BrowserWindow } from 'electron';
import isDev from 'electron-is-dev';

(...)

webpack.config.js

const path = require('path');

module.exports = [
    {
        target: 'electron-main',
        entry: path.join(__dirname, 'src/main/app.ts'),
        mode: 'development',
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    include: path.join(__dirname, 'src/main'),
                    use: 'ts-loader',
                    exclude: [
                        /node_modules/,
                        path.join(__dirname, 'src/renderer')
                    ]
                }
            ]
        },
        output: {
            path: path.join(__dirname, 'build'),
            filename: 'electron.js'
        },
        resolve: {
            extensions: ['.tsx', '.ts', 'js']
        },
        node: {
            __dirname: false
        }
    }
];

和 package.json:

{
    "name": "electron-react-typescript",
    "version": "0.0.1",
    "description": "",
    "main": "build/electron.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@types/electron-devtools-installer": "^2.2.0",
        "@types/react": "^16.9.19",
        "@types/react-dom": "^16.9.5",
        "@typescript-eslint/eslint-plugin": "2.x",
        "@typescript-eslint/parser": "2.x",
        "babel-eslint": "10.x",
        "concurrently": "^5.1.0",
        "electron": "^8.0.0",
        "electron-builder": "^22.3.2",
        "eslint": "6.x",
        "eslint-config-prettier": "^6.10.0",
        "eslint-config-react-app": "^5.2.0",
        "eslint-plugin-flowtype": "3.x",
        "eslint-plugin-import": "2.x",
        "eslint-plugin-jsx-a11y": "6.x",
        "eslint-plugin-react": "7.x",
        "eslint-plugin-react-hooks": "1.x",
        "html-webpack-plugin": "^3.2.0",
        "prettier": "^1.19.1",
        "source-map-loader": "^0.2.4",
        "ts-loader": "^6.2.1",
        "typescript": "^3.7.5",
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.10.3"
    },
    "dependencies": {
        "electron-devtools-installer": "^2.2.4",
        "electron-is-dev": "^1.1.0",
        "react": "^16.12.0",
        "react-dom": "^16.12.0"
    }
}

我正在使用 eslint 并且更漂亮。

Answer 1

我有在另一个项目中使用的 webpack.config.js 文件，所以我复制它并进行了一些编辑。它奏效了!我比较了它们，发现了一个非常非常小的错误。

(...)
resolve: {
    extensions: ['.ts', 'js', '.tsx']
},
(...)

我写了 ['.ts', 'js' , '.tsx'] 不是 ['.ts', '.js' ，'tsx']。
发生此错误是因为我不只是写一个点。