React +typescript+antd框架出错的相关问题与解决

搭建React和typescript框架问题汇总与解决方案

编译问题1，是有未使用的变量

 @typescript-eslint/no-unused-vars

解决办法，可创建.eslint文件。需要全局安装eslint，不然eslint init命令会报找不eslint错误。

// 全局安装
npm install eslint -g
//在项目目录安装eslint包
npm install eslint --save-dev
// 生成.eslintrc.js文件
eslint init
//配置如下：
// .eslintrc.js
module.exports = {
  "rules": {
    "no-unused-vars": "off", //禁用
    "@typescript-eslint/no-unused-vars": ["off"], //禁用
  },
  //...
};

编译问题2

Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

解决办法，在.eslintrc.js文件配置如下：

module.exports = {
  "rules": {
    "@typescript-eslint/no-explicit-any": ["off"] //禁用
  },
  //...
};

编译问题3

 Unnecessary semicolon  @typescript-eslint/no-extra-semi

解决办法，在.eslintrc.js文件配置如下：

module.exports = {
  "rules": {
    "semi": 0, // eslint 不检查分号
  },
  //...
};

编译问题4

 Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion

解决办法，在.eslintrc.js文件配置如下：

module.exports = {
  "rules": {
    "@typescript-eslint/no-non-null-assertion": ["off"] //禁用
  },
  //...
};

require引入问题

'require' is not defined.eslintno-undef

需要修改下 eslint 的配置，一般 eslint 配置文件为 .eslintrc.js

// .eslintrc.js
module.exports = {
  env: {
    node: true // 只需将该项设置为 true 即可
  },
  //...
};

react 取消每次运行项目默认打开浏览器

找到package.json 文件，修改 node scripts/start.js 为 set BROWSER=none&&node scripts/start.js，不要留空格，这样每次启动项目就不会打开浏览器了

"scripts": {
    "start": "set BROWSER=none&&node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },

create-react-app搭建的react项目中配置alias

先运行脚本eject npm run eject | yarn run eject
找到项目中paths.js文件

module.exports = {
...
  swSrc: resolveModule(resolveApp, 'src/service-worker'),
  appSrcComponents: resolveApp("src/components"), // 自己加的路径配置
  publicUrlOrPath,
}

在paths.js同目录下找到webpack.config.js，并修改里面的resolve.alias

alias: {
        // Support React Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        'react-native': 'react-native-web',
        // Allows for better profiling with ReactDevTools
        ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),
        // 加自己的配置
        '@':paths.appSrc,
        '@components': paths.appSrcComponents,
      },

使用如下：

import '@/assets/icons'

增加对less的支持的配置

安装less插件

yarn add less less-loader --dev

在webpack.config.js中配置如下：

// 添加配置
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

//第一段（test: /(\.less)$/,...)配置必须放前面（一定要是前面，后面就不起作用了）加上如下代码：
module: {
      strictExportPresence: true,
      rules: [
      	//...
			{
              test: /(\.less)$/,
              use: [
                'style-loader',
                'css-loader',
                {
                  loader: 'less-loader',
                  options: {
                    lessOptions: {
                      javascriptEnabled: true,
                    },
                  },
                },
              ],
            },
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                modules: true,
                sourceMap: isEnvProduction && shouldUseSourceMap
              },
                "less-loader"
              ),
              sideEffects: true
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent
              },
                "less-loader"
              )
            },
            //...
       ]
    }

因为 webpack 4.X版本以后把use封装了成了方法，getStyleLoaders,如果用了这个方法，就不能在写options了，会有冲突，所以要单独配置一下less-loader