vue.js - 运行 watch-development 时，Webpack 从节点模块抛出大量错误

Question

在运行 watch-development 时，我被节点模块中的许多错误所困扰，甚至不知道从哪里开始解决其中的一些错误。也许我的 webpack 配置有问题，但我已经尝试寻找解决方案好几天了，但一无所获

一些错误：

      TS2307: Cannot find module 'rxjs-compat/operators/multicast'.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\observeOn.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\observeOn.ts(1,15)
      TS2307: Cannot find module 'rxjs-compat/operators/observeOn'.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\onErrorResumeNext.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\onErrorResumeNext.ts(1,15)
      TS2307: Cannot find module 'rxjs-compat/operators/onErrorResumeNext'.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\pairwise.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\pairwise.ts(1,15)
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts(37,3)
      TS2552: Cannot find name 'expect'. Did you mean 'expected'?
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts(40,1)
      TS2582: Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or `npm i @types/mocha`.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts(42,3)
      TS2304: Cannot find name 'expect'.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts(45,3)

我有数百个这样的错误都来自我的节点模块，主要是抱怨它找不到模块，但也有一些抱怨它找不到名称'x'

这是我的 webpack 配置：

/// <binding />
"use strict";

module.exports = (env, options) => {


    const path = require('path');
    const webpack = require('webpack');
    const CleanWebpackPlugin = require('clean-webpack-plugin');

    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    const VueLoader = require("vue-loader");

    let pathsToClean = ['dist/*.*', 'dist/fonts/*.*', 'dist/images/*.*'];

    let cleanOptions = {
        root: __dirname + '/wwwroot/',
        verbose: true,
        dry: false
    };

    return {
        mode: 'development',
        entry: {
            app: './wwwroot/VueApp/Home/app.ts',
            mainCss: './wwwroot/VueApp/CSS/site.scss'
        },
        devtool: 'source-map',
        plugins: [
            new CleanWebpackPlugin(pathsToClean, cleanOptions),
            new webpack.ProvidePlugin({
                Popper: ['popper.js', 'default'],
                moment: 'moment',
                vueResource: 'vue-resource',
                vueRouter: 'vue-router',
                vuex: 'vuex'
            }),
            new VueLoader.VueLoaderPlugin(),
            new MiniCssExtractPlugin({
                filename: "[name].bundle.css"
            })
        ],
        output: {
            publicPath: "/dist/",
            path: path.join(__dirname, '/wwwroot/dist/'),
            filename: '[name].bundle.js'
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /(node_modules)/,
                    query: {
                        presets: [
                            ['env', { targets: { uglify: true } }]
                        ]
                    }
                },
                {
                    test: /\.tsx?$/,
                    exclude: /node_modules/,
                    loader: "ts-loader",
                    options: {
                        appendTsSuffixTo: [/\.vue$/]
                    }
                },
                {
                    test: /\.(sa|sc|c)ss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        { loader: 'css-loader', options: { minimize: true, sourceMap: false } },
                        {
                            loader: 'sass-loader', options: { sourceMap: false } }
                    ],
                },
                {
                    test: /\.(svg|png|jpg|gif)$/, 
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 8 * 1024,
                            name: './images/[name].[ext]'
                        }
                    }
                },
                {
                    test: /\.(eot|ttf|woff|woff2)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 8 * 1024,
                            name: './fonts/[name].[ext]'
                        }
                    }
                },
                {
                    test: /\.vue$/,
                    loader: 'vue-loader'
                }
            ]
        },
        resolve: {
            alias: {
                vue: 'vue/dist/vue.js'
            },
            extensions: ['.ts', '.js', '.vue', '.json']
        }
    };
};

这是我的文件结构的样子：

https://ibb.co/xjQMCX0

标签： vue.jsnpmwebpacknode-modulestask-runner-explorer