初探React技术栈（一）

neroneroffy 发布于2019-08-26 13:53 / 1361人阅读

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

结语

好长时间没有写文章了，嗯嗯其实是因为工作忙！！！最近学习的东西也比较多，觉得是一个很好的巩固，分享的时间，打算就这段时间的学习，写一个小系列的分享文章，希望有错误的地方有大佬能够不吝赐教！！晚安

专线服务超融合服务器 webrtc技术初探音视频技术webrtc初探技术栈全栈技术

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109756.html

初探react技术栈（一）

摘要：相信用的同学也不少找到函数在其中中添加启用编译。。。react 最近已经开始使用react技术栈了，从头开始搭建项目，有必要的记录一下配置的过程以及项目分层的思路，这次后台项目采用的主要采用react-create-app脚手架以及Ant DesignUI 以及多语言react-intl create-react-app 这是官方维护的脚手架应用我们一般也采用这个 $ npm or c...

刘玉平 2019-05-23 16:23 评论0 收藏0
面试分享：一年经验初探阿里巴巴前端社招

摘要：三轮技术面上一轮发挥感觉没前两轮发挥好，所以还是有点不自信的，没想到第三天后，就来电话了，通知我去阿里园区面试。一般阿里社招都是招3-5年的P6+高级工程师，当初自己一年经验也没有想过有这个面试机会。虽然没想着换工作，但是经常关注一些招聘网站的信息，某一天，在某boss上有个人找我，叫我发一下简历，我一看是阿里的某技术专家，虽然之前也有阿里的在某boss上给我要简历，但是我深知自己...

ACb0y 2019-08-21 11:49 评论0 收藏0
面试分享：一年经验初探阿里巴巴前端社招

摘要：三轮技术面上一轮发挥感觉没前两轮发挥好，所以还是有点不自信的，没想到第三天后，就来电话了，通知我去阿里园区面试。一般阿里社招都是招3-5年的P6+高级工程师，当初自己一年经验也没有想过有这个面试机会。虽然没想着换工作，但是经常关注一些招聘网站的信息，某一天，在某boss上有个人找我，叫我发一下简历，我一看是阿里的某技术专家，虽然之前也有阿里的在某boss上给我要简历，但是我深知自己...

wawor4827 2019-08-05 11:50 评论0 收藏0
面试分享：一年经验初探阿里巴巴前端社招

摘要：三轮技术面上一轮发挥感觉没前两轮发挥好，所以还是有点不自信的，没想到第三天后，就来电话了，通知我去阿里园区面试。一般阿里社招都是招3-5年的P6+高级工程师，当初自己一年经验也没有想过有这个面试机会。虽然没想着换工作，但是经常关注一些招聘网站的信息，某一天，在某boss上有个人找我，叫我发一下简历，我一看是阿里的某技术专家，虽然之前也有阿里的在某boss上给我要简历，但是我深知自己...

wuyumin 2019-08-29 13:07 评论0 收藏0
React 初探

摘要：各个组件维护自己的状态和，当状态变更，自动重新渲染整个组件。形式的定义的组件是以的形式来创建的组件的，是目前极为推荐的创建有状态组件的方式，最终会取代形式相对于可以更好实现代码复用。组件名称首字母必须大写。变量名用包裹，且不能加双引号。目前在前端开发领域，框架Angular、react和vue占据着主流的地位而且可能会持续比较长的一段时间。三门框架中，从数据绑定机制来看，vue和an...

levy9527 2019-08-21 12:05 评论0 收藏0