一:React项目遇到的问题
1.使用create-react-app <项目名> 创建项目
运行npm run eject 弹出config文件夹
2.配置antd按需加载
需要先安装babel-plugin-import 》npm install babel-plugin-import --save-dev/npm i babel-plugin-import -D
因为create-react-app官方脚手架升级了,没有webpack.config.dev.js和webpack.config.prod
这两个文件了,所有这里我们就在webpack.config.js配置less。
看下面》
//找到这个位置
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
//在此添加如下两个常量
const lessRegex =/\.less$/;
const lessModuleRegex=/\.module\.less$/;
//找到此位置
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
//在这之后仿照上面添加如下代码
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 2,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
},
还需要在package.json配置plugins
"babel": {
"presets": [
"react-app"
],
//加入以下信息
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}
]
]
}
重新项目引用antd import{Button} from 'antd' 就成功了
import {Button,Radio} from 'antd'
function App() {
return (
<div >
<Button type="primary">测试</Button>
<Radio></Radio>
<Button type="dashed">Dashed</Button>
<Button type="danger">Danger</Button>
<Button type="link">Link</Button>
</div>
);
}
export default App;
3.配置代码格式化
我在这里用的是ESLint + Standard 项目配置
来看我下的.eslintrc.js配置
module.exports = {
root: true,
// 环境,这里可以设置环来做区别判断
env: {
browser: true,
commonjs: true,
es6: true
},
// 使用的扩展库
extends: ['standard', 'standard-react'],
// 解析器用于解析代码
parser: 'babel-eslint',
// 解析器配置
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 2018,
sourceType: 'module'
},
// 可以全局使用变量
globals: {
Babel: true,
React: true,
PATH_ENV: true
},
// 第三方插件
plugins: [],
// 规则配置
rules: {
'no-unused-vars': 'off',
semi: 0,
'no-tabs': 'off'
}
}
rules:{} 里面就是相关的配置规则 ,很神奇。
在根目录下再创建.editorconfig文件
我的配置
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.js]
[*{scss,js,css}]
其他还有更详细的介绍 链接
root = true # 根目录的配置文件,编辑器会由当前目录向上查找,如果找到 `roor = true` 的文件,则不再查找
[*] # 匹配所有的文件
indent_style = space # 空格缩进
indent_size = 4 # 缩进空格为4个
end_of_line = lf # 文件换行符是 linux 的 `\n`
charset = utf-8 # 文件编码是 utf-8
trim_trailing_whitespace = true # 不保留行末的空格
insert_final_newline = true # 文件末尾添加一个空行
curly_bracket_next_line = false # 大括号不另起一行
spaces_around_operators = true # 运算符两遍都有空格
indent_brace_style = 1tbs # 条件语句格式是 1tbs
spaces_around_brackets # 表示括号和括号之间应有空格:无空格,仅在括号内,仅在括号外或在括号的两侧 (none,inside,outside,both)
max_line_length # 在指定的字符数后强制换行。off关闭此功能
[*.js] # 对所有的 js 文件生效
quote_type = single # 字符串使用单引号
[*.{html,less,css,json}] # 对所有 html, less, css, json 文件生效
quote_type = double # 字符串使用双引号
[package.json] # 对 package.json 生效
indent_size = 2 # 使用2个空格缩进
4.使用预处理器sass
需要安装node-sass、sass-loader
安装启动项目后发现报错
咱也不知道是神马原因,经过测试后需要安装
npm rebuild node-sass
就ok了。