找不到模块

Question

所以我正在使用 Angular 开发一个 Electron 应用程序，但是我在将新依赖项 (electron-regedit) 导入到我的 main.js（我放置 Electron 应用程序的位置）时遇到了一些问题、浏览器窗口、ipcMain 等）。当我尝试打包应用程序并尝试打开时，我收到以下消息：

我搜索了很多，但我尝试过的任何东西都有效，我使用 electron-packager 和 webpack 来打包我的应用程序。我注意到的一件事是，我尝试在 main.js 文件中导入的任何依赖项都会出现问题，我尝试使用依赖项“electron-log”。我尝试做的另一件事是在 package.json 中将依赖项从“dependencies”更改为“devDependencies”，重置 node_modules 并再次安装它，但我没有成功。

我将分享我的 webpack 文件，我相信我的问题出在这里或 electron-packager 本身。这是我的 webpack 文件：

const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const path = require('path');
const webpack = require('webpack');

const projectRoot = __dirname || process.cwd();
const isDevelopment = process.env.NODE_ENV === 'development';

const nodeModules = path.join(projectRoot, 'node_modules');
const sourceFolder = path.join(projectRoot, 'src');
const outputFolder = path.join(projectRoot, 'dist');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const rxPaths = require('rxjs/_esm5/path-mapping');

module.exports = {
  target: isDevelopment ? 'web' : 'electron-renderer',
  //devtool: isDevelopment ? 'source-map' : 'source-map',
  entry: {
    main: [path.join(sourceFolder, 'main.ts')],
  },
  module: {
    rules: [
      {
        // include fonts inline in css
        test: /\.(eot|ttf|otf|woff|woff2|svg)$/,
        type: 'asset/inline',
        include: nodeModules,
      },
      {
        test: /\.(svg|cur|jpg|png|ani|gif|webp)$/,
        type: 'asset/resource',
        exclude: nodeModules,
        generator: {
          filename: 'static/images/[name].[contenthash:20][ext][query]',
        },
      },
      {
        test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
        loader: '@ngtools/webpack',
      },
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            // Translates CSS into CommonJS
            loader: 'css-loader',
            options: {
              sourceMap: true,
              //importLoaders: 1,
              //modules: true
              //url:false
            },
          },
          /*
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            },
          },
          */
          {
            // rewrites relative paths in url() statements based on the original source file, used for awesome font urls rewrite
            loader: 'resolve-url-loader',
            options: {
              sourceMap: true,
              //debug: true,
            },
          },
          {
            // Compiles Sass to CSS
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              sassOptions: {
                //includePaths: ['node_modules']
              },
            },
          },
        ],
      },
    ],
  },
  output: {
    clean: true, // Clean the output directory before emit.
    path: outputFolder,
    filename: 'static/js/[name].[contenthash:20].bundle.js',
    sourceMapFilename: 'static/js/[name].[contenthash:20].source.map',
    chunkFilename: 'static/js/[id].[contenthash:20].chunk.js',
    pathinfo: true,
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: isDevelopment ? '[name].css' : '[name].[hash].css',
    }),
    new HtmlWebpackPlugin({
      template: path.join(sourceFolder, 'index.html'),
      filename: 'index.html',
      hash: false,
      inject: true,
      favicon: false,
      minify: isDevelopment ? false : true,
      cache: true,
      showErrors: true,
      title: 'project',
    }),
    new AngularCompilerPlugin({
      tsConfigPath: 'src/tsconfig.app.json',
      mainPath: 'main.ts',
      sourceMap: true,
      hostReplacementPaths: {
        'environments/environment.ts': isDevelopment
          ? 'environments/environment.ts'
          : 'environments/environment.prod.ts',
      },
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          context: 'src',
          to: '',
          from: 'assets/**/*',
          globOptions: {
            dot: true,
            gitignore: true,
            ignore: ['.gitkeep', '**/.DS_Store', '**/Thumbs.db'],
          },
        },
      ],
    }),
  ],
  node: {
    global: true,
    __filename: true,
    __dirname: true,
  },
  resolve: {
    extensions: ['.ts', '.js', '.scss', '.css', '.html'],
    symlinks: true,
    modules: [sourceFolder, nodeModules],
    fallback: {
      fs: false,
      tls: false,
      net: false,
      os: false,
      zlib: false,
      child_process: false,
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      process: require.resolve('process/browser'),
      crypto: require.resolve('crypto-browserify'),
      stream: require.resolve('stream-browserify'),
      assert: require.resolve('assert/'),
      path: require.resolve('path-browserify'),
      util: require.resolve('util/'),
      buffer: require.resolve('buffer/'),
    },
  },
};

这是我用来捆绑应用程序的 npm spripts（我使用 bundle:windows）

"copy": "copyfiles main.js package.json menu/* resources/* dist",
"build:prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js",
"package:windows": "node package --platform=win32 --arch=ia32",
"bundle:windows": "npm-run-all -s build:prod copy package:windows",

希望有人能帮助我。谢谢

Answer 1

显然，这里的问题是我的项目对 main.js 电子文件和 angular“应用程序”使用相同的 package.json。为了解决这个问题，我不得不重构整个项目，基本上将项目分成两个 package.json.

更新我发现 node_modules 文件夹没有被复制到 dist 文件夹，所以我所做的是安装模块，我想在 main.js 中导入，在一个单独的文件夹中并使用它导入它们路径

找不到模块

Cannot find module

webpack

electron

electron-packager