Webstorm上创建的Typescript项目 console.log报错显示红色

 出错如下:console.log()

Unresolved variable or type console.

 项目配置:

tsconfig.json

{
    "compilerOptions": {
        "module": "ES2015",
        "target": "ES2015",
        // "sourceMap": false
        "strict": true,
        "noEmitOnError": true
    }
}

webpack.config.js

//引入包
const path = require("path");
//引入html配置插件
const htmlweback = require("html-webpack-plugin");
//引入消除dist
const {CleanWebpackPlugin} = require("clean-webpack-plugin");

//webpack中所有的配置信息都应该写在module.exports中(commandjs)
//require只能看到通过 module.exports 导出的内容,require 是运行时
module.exports = {
//指定入口文件
    entry: "./src/index.ts",
//指定打包路径
    output: {
        //打包的文件目录
        path: path.resolve(__dirname, "dist"),
        //打包后的文件
        filename: "bundle.js",
        environment: {
            arrowFunction: false
        }
    },
    //指定webpack打包要使用模块
    module: {
        //指定加载的规则
        rules: [
            {
                //test指定的是规则生效的文件
                test: /\.ts$/,
                //要使用的loader
                use: [
                    {
                        //指定加载器
                        loader: 'babel-loader',
                        options: { //设置预定义的环境,需要运行的环境
                            presets: [
                                [
                                    "@babel/preset-env",
                                    {
                                        targets: {
                                            "chrome": "58",
                                            "ie": "11"
                                        },
                                        "corejs": "3",
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ]
                        },

                    },
                    'ts-loader'
                ],
                //要排除的文件
                exclude: /node_modules/
            }
        ]
    },
//配置webpack插件
    plugins: [
        new htmlweback({
            // title:""
            template: './src/index.html',
        }),
        new CleanWebpackPlugin()
    ],
    resolve: {
        extensions: ['.ts', '.js']
    },
    devServer: {
        host: "localhost",
        port: 8099,
    }
}

package.json

{
  "name": "tsdemowb",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=production",
    "start": "webpack serve --open --mode=development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "babel-loader": "^9.1.2",
    "clean-webpack-plugin": "^4.0.0",
    "core-js": "^3.30.1",
    "html-webpack-plugin": "^5.5.1",
    "ts-loader": "^9.4.2",
    "typescript": "^5.0.4",
    "webpack": "^5.79.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.13.3"
  }
}

分析与解决:

参考网上说法是没有tsconfig.json,但是我的项目已经配置了。

根据其他同学的项目配置更新package.json 下的devDependencies的配置,把大部分的版本都降低。

{//...
 "devDependencies": {
    "@babel/core": "^7.13.15",
    "@babel/preset-env": "^7.13.15",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "core-js": "^3.10.1",
    "css-loader": "^5.2.1",
    "html-webpack-plugin": "^5.3.1",
    "less": "^4.1.1",
    "less-loader": "^8.1.0",
    "postcss": "^8.2.10",
    "postcss-loader": "^5.2.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^2.0.0",
    "ts-loader": "^8.1.0",
    "typescript": "^4.2.4",
    "webpack": "^5.32.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  }
//...
}

现在运行与打包显示代码:console.log都没有报红了。

猜你喜欢

转载自blog.csdn.net/LlanyW/article/details/130263158
今日推荐