yarn的使用

npm和yarn比较

npm缺点

安装慢

安装文件版本不一致的bug

出现错误继续安装，警告易丢失

yarn优点

速度快：并行安装，离线安装（以前安装过，直接从缓存中获取）

安装版本统一

输出信息简洁

命令对比

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RMeWqByB-1663571584645)(imgs\npm-yarn命令区别.jpg)]

yarn的使用

全局安装yarn

安装

npm i -g yarn

查询当前镜像

yarn config get registry

传递结果输出：https://registry.yarnpkg.com

切换为淘宝镜像

yarn config set registry http://registry.npm.taobao.org/

创建应用

yarn create react-app my-app

yarn应用

启动webpack编译

yarn start

结构

public/index.html模板文件

src放要打包的文件

src/index.js入口文件，挂载根组件

src/index.css全局css样式

src/App.js根组件，App.css根组件样式

一个js文件就是一个组件

更换react版本

yarn remove react react-dom
yarn add [email protected] [email protected]

暴露webpack文件

git add . 
git commit -am 'x'
yarn eject

注意

1. CSS文件中的样式是全局生效的，因此每个jsx文件的最外层类名要不同，可首字母大写，来区分。
2. 类名作用域问题：全局生效
   • 每个组件中的根标签类名保证唯一，设置样式都用根标签类名开头。
   • Login.module.css写法，防止类名冲突：把css文件模块化，打点调样式。
   • 使用less / sass语法，用选择器嵌套方法解决。

less

简化css写法。less / sass是css的扩展语言。

配置

使用插件将less转化为css

easy less将less编译成同名css，导入编译后的css文件即可。

React中直接导入less方法

1. 安装less包 yarn add less-loader less // 安装到生产环境

2. 暴露webpack yarn eject

3. webpack.config.js顶部新增

   const lessRegex = /\.less$/
   const lessModuleRegex = /\.module\.less$/
   

4. 复制一份scss配置(根据test名称)，并在oneof下新增即可

写法

使用变量

less中用@，sass中用$：

@fontSize: 18px;
.Login {
    font-size: @fontSize - 3;
    height: 300px;
    line-height: 100px;
}

Mixins混入

1. 无返回值的混入：相当于封装样式，使用时直接调用。

   .bordered();或#d();

2. 选择器混入：标签相同的选择器、样式，都封装到函数中。

   .bordered() {
     border-top: dotted 1px black;
     border-bottom: solid 2px black;
     // &通常用在伪类选择器，代表元素自身。
     &:hover {
       background-color: darksalmon;
       color: bisque;
     }
   }
   a {
     .bordered();
   }
   

3. 命名空间混入：同时封装多个公共选择器样式，需要什么打点调什么。函数内不再是类名，而是选择器模块名称。

   #mode {
     .bgc {
       backgroundColor: skyblue
     }
   }
   p {
     #mode .bgc();
   }
   

嵌套写法

.Regist {
  > h3 {
    // > 父子
    font-size: @fontSize + 14;
  }
  > h3 + span {
    // + 紧跟在后面的兄弟元素
    color: blue;
    font-weight: bolder;
  }
  > h3 ~ a {
    // ~ 排在后面的兄弟元素
    background-color: lightblue;
  }
  span {
    // 后代
    font-size: @fontSize;
  }
}

加减乘除运算

1. 单位：以左侧第一个有单位的为准。
2. 加减运算：先换算单位，再计算。如：2cm+10mm=3cm
3. 乘除运算：不转换单位，直接运算。如：2cm*3mm=6cm
4. 无效转换：单位无法换算，则忽略单位。如px和cm换算单位。
5. calc()：可以进行变量的计算，普通数学表达式无法识别。

sass

使用

sass也是css的扩展语言，功能和less类似。

传统的sass使用缩进语法来表达标签之间的关系，没有{}语法。

scss是sass的升级版，支持css语法结构，有{}语法。建议使用scss。

React都支持。

混合器

何时使用

是否使用？

能找到一个很好的短名字来描述这些属性修饰的样式。

todo-------------------------6-16sass—Cart---------------

sass安装

yarn add -D sass-loader sass webpack

public

放什么？

放一些静态资源，不被webpack打包。直接被复制到构建文件夹dist中。

如：第三方文件(但一般是用yarn安装，用import导入)

环境变量

自定义环境变量

自动根据环境变化选择不同环境，.env文件：

REACT_APP_DEVELOPMENT_API = "http://dev.baidu.com" // 开发
REACT_APP_PRODUCTION_API = "http://prod.baidu.com" // 生产
%REACT_APP_DEV_NAME%
%REACT_APP_PROD_NAME%

测试在js中使用环境变量

src/utils/ajax.js：ajax接口。判断环境变量，切换环境，打印api查看

export default function ajax() {
  // 通过process.env获取当前项目中使用的环境变量
  // NODE_ENV 是安装node.js时内置的环境变量。可以得到当前项目环境时生产环境还是开发环境。
  let isProduction = process.env.NODE_ENV;
  let api =
    isProduction === "production"
      ? process.env.REACT_APP_PRODUCTION_API
      : process.env.REACT_APP_DEVELOPMENT_API;
  console.log("---", api);
}

测试在jsx中使用环境变量

process.env.NODE_ENV

测试在html中使用环境变量

%REACT_APP_DEV_NAME%
%REACT_APP_PROD_NAME%

全局挂载

针对很多组件都要使用这个方法或属性，为了避免在每个组件中频繁的导入，可以挂载到全局的原型对象上。

1. 在index.js中，引用ajax：

   import ajax from "./utils/ajax";
   

2. 全局挂载类组件内部的通用属性和方法，挂载到全局的原型对象上。

   React.Component.prototype.$ajax = ajax;
   

3. 子类可以通过this.$ajax();使用此方法，如在jsx文件中使用：

   componentDidMount() {
     this.$ajax();
   }
   

4. 函数组件无法使用。

脚手架配置跨域

1. 安装包

   yarn add http-proxy-middleware // 和node.js中代理服务器使用的包一样
   

2. 在src目录下新建文件setupProxy.js

   const { createProxyMiddleware } = require("http-proxy-middleware");
   module.exports = (app) => {
     app.use(
       "/lqb", // 前缀
       createProxyMiddleware({
         target: "https://www.lanqb.com", // 代理目标：放接口地址
         changeOrigin: true,
         pathRewrite: {
           pathRewrite: {
             "^/lqb": "", // 删除前缀
           },
         },
       })
     );
   };