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