首页 前端知识 React typescript antd框架出错的相关问题与解决

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

2024-07-01 23:07:58 前端知识 前端哥 36 866 我要收藏

搭建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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13738.html
标签
评论
发布的文章

在echarts中使用geojson地图

2024-07-29 00:07:05

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!