关于前端:初探React技术栈一

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

结语

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