yarn的使用

最新推荐文章于 2024-04-30 19:03:09 发布

黛玉戴玉逮鱼

最新推荐文章于 2024-04-30 19:03:09 发布

阅读量1.8k

点赞数

分类专栏： yarn 文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/weixin_44730335/article/details/126934418

版权

yarn 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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 react@17.0.2 react-dom@17.0.2

暴露webpack文件

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

注意

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

less

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

配置

使用插件将less转化为css

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

React中直接导入less方法

安装less包 yarn add less-loader less // 安装到生产环境
暴露webpack yarn eject

webpack.config.js顶部新增

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

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

写法

使用变量

less中用@，sass中用$：

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

Mixins混入

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

.bordered();或#d();

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

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

命名空间混入：同时封装多个公共选择器样式，需要什么打点调什么。函数内不再是类名，而是选择器模块名称。
```
#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;
  }
}

加减乘除运算

单位：以左侧第一个有单位的为准。
加减运算：先换算单位，再计算。如：2cm+10mm=3cm
乘除运算：不转换单位，直接运算。如：2cm*3mm=6cm
无效转换：单位无法换算，则忽略单位。如px和cm换算单位。
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%

全局挂载

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

在index.js中，引用ajax：
```
import ajax from "./utils/ajax";
```
全局挂载类组件内部的通用属性和方法，挂载到全局的原型对象上。
```
React.Component.prototype.$ajax = ajax;
```
子类可以通过this.$ajax();使用此方法，如在jsx文件中使用：
```
componentDidMount() {
  this.$ajax();
}
```
函数组件无法使用。

脚手架配置跨域

安装包

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

在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": "", // 删除前缀
        },
      },
    })
  );
};