react

最近曾经开始应用react技术栈了，从头开始搭建我的项目，有必要的记录一下配置的过程以及我的项目分层的思路，这次后盾我的项目采纳的次要采纳react-create-app脚手架以及Ant DesignUI 以及多语言react-intl

create-react-app

这是官网保护的脚手架利用 咱们个别也采纳这个
$ npm or cnpm$ npm install create-react-app -g #全局下载$ create-react-app #[项目名称] 新建我的项目# 如果想要把 webpack 配置裸露进去 能够执行以下命令$ npm run eject # 初始时能够在package.json中找到

less/sass

为了晋升咱们写款式的效率 个别采纳 less/sass
# less$ npm i less less-loader# sass$ npm i node-sass sass-loader

并在webpack.config.js批改以下配置:

# 增加sass反对# 找到 file-loader{    loader: require.resolve('file-loader'),    exclude: [/.(js|mjs|jsx|ts|tsx)$/, /.html$/, /.json$/, /.scss$/],    options: {        name: 'static/media/[name].[hash:8].[ext]',    },},# 在exclude中加上`/.scss$/` 并且在前面加上{     test: /.scss$/,    loader: ['node-sass', 'sass-loader']}
# 首先在webpack中定义两种变量const lessRegex = /.less$/; # 能够找到 `style files regexes` 处申明const lessModuleRegex = /.module.less$/;# 这是为了匹配 .less / .module.less 文件# 找到 `getStyleLoaders` 函数 在其中 loaders 中增加{    loader: require.resolve('less-loader'),    options: cssOptions,}# 找到 sassModuleRegex 地位处 在对象后加上 以下代码{    test: lessRegex,    exclude: lessModuleRegex,    use: getStyleLoaders({        importLoaders: 1,        sourceMap: isEnvProduction &&  shouldUseSourceMap    }),    sideEffects: true,},{    test: lessModuleRegex,    use: getStyleLoaders({        importLoaders: 1,        sourceMap: isEnvProduction && shouldUseSourceMap,        modules: true, // 模块化        getLocalIdent: getCSSModuleLocalIdent,    }),}
实现对less/sass反对，!留神 款式模块化须要不同的文件命名形式 比方 app.scss 模块化 -> app.module.scss 否则编译器也不晓得那个文件是公有的

配置门路

个别状况下 咱们引入文件都是须要相对路径然而如果嵌套层级少还能够然而如果层级很多 咱们就须要寻找一种方法帮忙咱们 来解脱繁琐的 ./../......

同样还是在webpack.config.js 找到alias在其中增加 '@': paths.appSrc

Ant Design

之前始终应用的 vue + element 的布局形式，而这次写我的项目则是次要应用 React + Ant Design

不得不说Ant Design整体的动画以及各种计划让我耳目一新！天啦噜这个动画 爱了 爱了

# 下载antd$ npm or cnpm$ npm i antd --save

首先在全局款式文件中写@import '~antd/dist/antd.css';此时就能够看到antd曾经引入胜利了

依据 Ant Design 官网文档 举荐其中定制主题介绍了less

所有可定制的less变量

@import '~antd/dist/antd.less'; // 引入官网提供的 less 款式入口文件@import 'your-theme-file.less'; // 用于笼罩下面定义的变量
正告依据antd issues 7929中提醒 css less 不要都采纳less-loader
# 首先在webpack中定义两种变量const lessRegex = /.less$/; # 能够找到 `style files regexes` 处申明const lessModuleRegex = /.module.less$/;# 这是为了匹配 .less / .module.less 文件# 找到 `getStyleLoaders` 函数 在其中 loaders 中增加{    loader: require.resolve('less-loader'),    options: cssOptions,}# 找到 sassModuleRegex 地位处 在对象后加上 以下代码{    test: lessRegex,    exclude: lessModuleRegex,    use: getStyleLoaders({        importLoaders: 1,        sourceMap: isEnvProduction && shouldUseSourceMap    }),    sideEffects: true,},{    test: lessModuleRegex,    use: getStyleLoaders({        importLoaders: 1,        sourceMap: isEnvProduction && shouldUseSourceMap,        modules: true, // 模块化        getLocalIdent: getCSSModuleLocalIdent,    }),}
此时还没有实现 然而less / module.less 然而在改主题色的时候，咱们发现会报错

// 此时须要批改以下代码// 找到 `getStyleLoaders` 函数 在其中 loaders 中增加{    loader: require.resolve('less-loader'),    options: {...cssOptions, javascriptEnabled: true}, // 启用js编译。。。}
置信用scss/sass的同学也不少
// 找到 `getStyleLoaders` 函数 在其中 loaders 中增加{    loader: require.resolve('less-loader'),    options: {...cssOptions, javascriptEnabled: true, modifyVars: {'primary-color': '#000',}}, // 启用js编译。。。}

而后在index.js 入口文件中引入自定义的全局less文件，并在外面引入~antd/dist/antd.less 而后能够持续应用scss写款式不受影响，尽管这种做法十分鸡肋，然而我搜寻了几种办法，然而都不现实，心愿有晓得更好的办法的大佬告知

链接

less/sass to create-react-app
Ant Design

结语

好长时间没有写文章了，嗯嗯 其实是因为工作忙！！！最近学习的货色也比拟多，感觉是一个很好的坚固，分享的工夫，打算就这段时间的学习，写一个小系列的分享文章，心愿有谬误的中央有大佬可能不吝赐教！！