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']
}

// 增加less支撑 这类是费事的写法 假如须要 antd 的个性化主题定制 请参看下文 antd less 设置
// 找到 `/\.css$/` 改成 `/\.(?:le|c)ss$/`
// 找到 `getStyleLoaders` 函数 在个中 loaders 中增加
{
    loader: require.resolve('less-loader'),
    options: cssOptions,
}
// 如许就完成 less 支撑
// 假如想要款式模块化那末就须要加上  modules: true
{
    test: cssRegex, // cssRegex这个代表着就是 婚配文件的正则表达式
    exclude: cssModuleRegex,
    use: getStyleLoaders({
    importLoaders: 1,
    modules: true,  //模块化
    sourceMap: isEnvProduction && shouldUseSourceMap,
    }),
    sideEffects: true,
},

完成对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

结语

好长时候没有写文章了，嗯嗯 实在是因为事情忙！！！近来进修的东西也比较多，以为是一个很好的稳固，分享的时候，盘算就这段时候的进修，写一个小系列的分享文章，愿望有毛病的处所有大佬可以不吝赐教！！晚安