Blog | jieerwenking的前端之路

react项目搭建

May 7, 2021 · 2 min read

jieerwenking

前端开发

webpack搭建react项目#

1. 安装依赖包#

mkdir react_app
cd react_app
npm init --yes
npm i -D @babel/preset-env @babel/preset-react autoprefixer babel-loader css-loader html-webpack-plugin less less-loader px2rem-loader style-loader webpack webpack-cli webpack-dev-server postcss-loader
npm i --save react react-dom

2. webpack.config.js#

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
  mode: "development",
  entry: "./src/index.jsx",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  devtool: 'source-map',//生成单独的完整的source-map文件，方便开发
  devServer: {
    port: 8080,//开发服务器的端口号
    hot: true,//启动热更新
  },
  module: {
    rules: [
      {
        test: /\.(t|j)sx?$/,
        loader: "babel-loader",
        options: {
          presets: [
            "@babel/preset-env", //解析ES+
            "@babel/preset-react", //解析React JSX语法的
          ],
        },
        include: path.resolve("src"),
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader"
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          "style-loader" ,
          {
            loader: "css-loader", //处理import和url
            options: { importLoaders: 3 }, //import的文件要导入之前需要经过几个loader的处理
          },
          {
            loader: "postcss-loader", //加入厂商的兼容性前缀
            options: {
              postcssOptions: {
                plugins: ["autoprefixer"],
              },
            },
          },
          {
            loader: "px2rem-loader", //可以把px单位变成rem单位
            options: {
              remUnit: 37.5, //在标准设计稿下1rem对应的是75px
              remPrecesion: 8, //计算后的小数精度是8位
            },
          },
          "less-loader", //把less编译成css
        ],
      },
      {
        test: /\.(jpg|png|gif|svg|jpeg)/,
        type: "asset", //以前url-loader或者file-loader，现在不需要
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
};

3. pageage.json#

"scripts": {
    "dev": "webpack server",
    "build": "webpack"
  },

Vite 建立react项目#

vite官网

# npm 6.x
npm init @vitejs/app my-react-app --template react

# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-react-app -- --template react

理论上这样就可以了，但是根据大佬的教程npm run dev直接报错
解决(要自己手动执行一下)

node node_modules/esbuild/install.js
npm run dev

这回我以为可以了，然后浏览器里面又报错
解决(关掉安装的浏览器 React Developer Tools 插件,可能是因为我的版本太低了，2.5.2的 4版本的插件是没有问题的)

TODO#

问题只是解决了，但是并不知道是为什么

history API 总结

April 24, 2021 · One min read

jieerwenking

前端开发

History API#

具体参考history MDN官网的文档
属性
History.length只读
History.scrollRestoration
History.state只读
方法
History.go(number)
History.back()
History.forward()
History.pushState(state, title, url)
History.replaceState(state, title, url)
事件
onpopstate

`history stack`#

浏览器是一个栈结构的存贮器

// 当你依次浏览a, b, c 三个网页的时候，浏览器的操作是
let histroy1 = [];  // 放当前浏览器的页面
let histroy2 = [];  // 暂存的页面
history1.push(a);
history1.push(b);
history1.push(c);
// 此时浏览器的数据中是 histroy1 = [a, b, c]  histroy2 = []
// 这时你点击浏览器的后退按钮
history1.pop(c)
histroy2.push(c)
// 现在浏览器中的数据是 histroy1 = [a, b]  histroy2 = [c]
// 现在浏览器的b页面，当你从b页面跳转到新的d页面的时候。
history1.push(d);
history2.pop(c);
// 现在浏览器中的数据是 histroy1 = [a, b, d]  histroy2 = []

注意事项#

go 参数为数字 history.go(1) 相当于 history.forward(), history.go(-1) 相当于 history.back()
state属性可以在除了popstate事件中拿到state的值得另一种方式，注意它是只读的
pushState 和 replaceState 的关系
- 相同
  - 两者的使用方式基本一直，都是在history.state中添加内容
  - 第一个参数是state，第二个参数是title，第三个参数url，第二个参数没有浏览器实现，所以一般写null或者''就可以。
- 区别
  - pushState会在浏览器加入一条记录，改变history.length属性。replaceState是重写浏览器当前的记录，不会增加history.length的长度
popState事件，在浏览器返回和前进时会触发，也就是说栈结构有pop操作的时候才会触发的事件

具体应用#

1. 清除往返缓存#

往返缓存（Back/Forward cache，下文中简称bfcache）是浏览器为了在用户页面间执行前进后退操作时拥有更加流畅体验的一种策略。该策略具体表现为，当用户前往新页面时，将当前页面的浏览器DOM状态保存到bfcache中；当用户点击后退按钮的时候，将页面直接从bfcache中加载，节省了网络请求的时间。

window.addEventListener("pageshow", e => e.persisted && location.reload());
// e.persisted 是否从缓存读取，如果true 是从缓存取，如果false相反

2. window.performance.navigation.type 如果没有`e.persisted`可以通过该属性判断#

performance.navigation.type该属性返回一个整数值，表示网页的加载来源，可能有以下4种情况

value	describe
0	网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载，相当于常数performance.navigation.TYPE_NAVIGATE
1	网页通过“重新加载”按钮或者location.reload()方法加载，相当于常数performance.navigation.TYPE_RELOAD。
2	网页通过“前进”或“后退”按钮加载，相当于常数performance.navigation.TYPE_BACK_FORWARD。
255	任何其他来源的加载，相当于常数performance.navigation.TYPE_RESERVED

performance.navigation.redirectCount表示网页经过重定向的次数。

3. 禁用浏览器后退按钮#

history.pushState(null, null, document.URL);
window.addEventListener('popstate',  () => {
  history.pushState(null, null, document.URL);
});

参考文档#

echarts桑基图的使用和总结

March 30, 2021 · One min read

jieerwenking

前端开发

因为公司需要使用用流程图，来表示不同客户来源的走向和数据，用到了桑基图来表示。最近echarts刚出了5版本。对比了antV 和 echarts ，处理这种情况echarts要做的好些，但是在应用过程中还是遇到了不少坑，记录一下。

遇到的问题#

1. key不能重复的问题#

每一个node节点都不能重复，但是不知道echarts内部是如何识别中文是否一致的，感觉中文是有bug的。一致在报key相同，其实已经处理过了，是不同的了，最后还是加了英文的唯一key来区别不同的来源。

2. nodes 和 data 节点是不一样#

官网中说是可以一起使用的，其实并不是，echarts源码中，并没有去取nodes的值，而是去取的data上面的配置，所以，echarts的节点，只能用data属性

3. nodes节点一定不能重复#

这里如果后端返回的节点需要处理，建议数据格式用set，而不是数组

css3打造loading效果

March 26, 2021 · 2 min read

jieerwenking

前端开发

最近在写公司一个react + hook + typeScript的前端pc项目，组件都是自己一步一步搭起来的，记录一下。loading组件相对简单，下次把form组件，还有自己写的picker组件整理一下。逻辑不多，就直接粘贴代码了。

主要说一下对DOM节点的添加和移除，需要做一下判断，当前是否已经有组件存在了，如果当前用户已经调用了一个loading组件，那么就不可以在调用了。当用户添加移除loading的方法，重置当前的loading数量。
样式上，通过transform对li元素的3d角度和位移角度，来让li元素均匀的分部。
项目结构

import React from 'react';
import ReactDOM from 'react-dom';
import './index.less'

interface IProps {
    title?: string;  // 传入当前loading的文字，非必传
}
/* 渲染load的组件 */
const Load: React.FC<IProps> = ({
    title
}) => {
    /* 渲染li元素的数量 */
    const renderList = (num: number) => {
        let arr = [];
        while (num--) {
            arr.push(<li key={num} className={`load_item item${num + 1}`}></li>)
        }
        return arr;
    }


    return <div className="loading_mask">
        <ul className="loading_box">
            {renderList(6)}
        </ul>
        <span className="loading_title">{title}</span>
    </div>
}

Load.defaultProps = {
    title: '加载中...'
}

interface ILoad {
    loadDom: null | HTMLElement;     // 创建一个div容器
    count: number; // 判断当前有几个load
    containter: null | HTMLElement;  // 渲染当前reactdom的节点
    show: (title?: string) => void;  // 展示load的方法
    hide: () => void;  // 隐藏loading的方法
}

const Loading: ILoad = {
    loadDom: null,
    count: 0,
    containter: null,
    show: function (title) {
        this.count++;  // 记录当前的盒子数量
        if (this.loadDom) return;   // 只能出现一个
        this.loadDom = document.createElement('div')  // 创建一个div
        this.containter = document.body.appendChild(this.loadDom);  // 把div元素放到body上，然后把这个load 挂载到这个已经放到load的容器里面
        ReactDOM.render(<Load title={title} />, this.containter);
    },
    hide: function () {
        /* 调用方法后，把count减掉，然后如果count的数量小于等于0，说明loading已经没有了，就把当前的盒子移除掉，count也清零 */
        if (--this.count <= 0) {
            try {
                document.body.removeChild(this.containter as HTMLElement);
            } catch {
                //todo
            } finally {
                this.count = 0;
                this.loadDom = null;
            }
        }
    }
}

export default Loading;

样式文件

.loop(@counter) when(@counter > 0) {
    &.item@{counter} {
        transform: rotateZ(60deg * @counter) translateY(20px);
    }
    .loop(@counter - 1)
}

*{
    list-style: none;
    padding: 0;
    margin: 0;
}
/* loading的遮罩层 */
.loading_mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgb(#000 0.5);
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ccc;
    font-size: 14px;
    flex-direction: column;
    

    /* 当前的ul样式 */
    .loading_box {
        width: 80px;
        height: 80px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: load 2s linear infinite;

        /* 每个li的样式 */
        .load_item {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #ccc;
            .loop(6);  // 循环设置每一个里元素的位置
        }
    }
}

@keyframes load {
    form {
       transform: rotate(0deg); 
    } to {
        transform: rotate(360deg); 
    }
}

效果

docusaurus部署

March 17, 2021 · One min read

jieerwenking

前端开发

因为公司一直用react，看了一下vuepress不太会，然后查了一下react用这个docusaurus很友好，就选择了这个，部署到Github pages遇到了一些问题，记录分享一下。

github项目位置https://github.com/jieerwenking/jieerwenking.github.io
部署之后的项目https://jieerwenking.github.io/可能国外站点不稳定，有时候就会进不去，不知道是自己家网不好还是什么原因。

搭建本地的项目#

docusaurus官网脚手架
脚手架的设计真的很良心，像react脚手架一样安装启动，my-website就是项目的名字，classic是docusaurus的默认主题，官网中也有其他的可以下载插件配置主题

npx @docusaurus/init@latest init my-website classic

安装完成之后根据提示

cd my-website
npm run start

这个时候已经可以在localhost:3000，看到项目的主页了

修改配置#

配置文件是docusaurus.config.js，在里面修改一些主页的展示，这里的部分自己改一改都知道是什么意思了。我在这个文件中写了注释可以参考一下。
侧边栏的配置文件sidebars.js，可以参考，也可以看官方文档。
修改好自己的配置之后，就可以尝试部署了。

建立github pages项目 + 自动部署#

1. 准备工作#

创建一个项目，然后在setting里面设置GitHub Pages, 把构建的分支改为gh-pages,这个分支是要自己建立的，目前里面什么都不用有，把当前的项目代码都推到master分支。
注意一定要配置好docusaurus.config.js文件中的这四个属性比较重要，如果有什么问题，可能就是这里没有配置好，其他按需就可以

  url: 'https://jieerwenking.github.io',    // 当前页面的url，setting里面 都可以看到部署后的url
  baseUrl: '/',   // 这里看自己需要添加，如果添加为/win/  访问主页就是 https://jieerwenking.github.io/win/
  organizationName: 'jieerwenking', // 这里是你github的名字
  projectName: 'jieerwenking.github.io', // 这个是你要部署到的github的项目名字

2. 设置自动部署#

设置push到master分支之后自动部署，这个时候就要用到刚才建立好的gh-pages分支了，在根目录建立.github/workflows/documentation.yml文件，参考阮一峰大佬的博客
要注意一下ACCESS_TOKEN的配置，这个要提前在github中配置一下。参考github官网
要注意一下CNAME文件，如果你有自己的域名用的不是username.github.io这个域名的话，需要建立CNAME文件，并在里面写上自己的域名。

name: Deploy Github pages
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master
      with:
        persist-credentials: false
    - name: Install and Build
      run: |
        npm install
        npm run-script build 
    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@releases/v3
      with:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        BRANCH: gh-pages
        FOLDER: build
        BUILD_SCRIPT: npm install && npm run build

3. 推送项目#

把当前的项目文件都推送到master分支上，这个时候如果没有什么问题，github的action就开始工作自动部署了。在图中这个地方可以查看部署详情。部署完成后就可以打开你的主页看到部署后的内容了。大概就和官网差不多。
如果有其他问题，可以留言一起解决。

Recent posts

webpack搭建react项目#

1. 安装依赖包#

2. webpack.config.js#

3. pageage.json#

Vite 建立react项目#

TODO#

History API#

history stack#

注意事项#

具体应用#

1. 清除往返缓存#

2. window.performance.navigation.type 如果没有e.persisted可以通过该属性判断#

3. 禁用浏览器后退按钮#

参考文档#

遇到的问题#

1. key不能重复的问题#

2. nodes 和 data 节点是不一样#

3. nodes节点一定不能重复#

搭建本地的项目#

修改配置#

建立github pages项目 + 自动部署#

1. 准备工作#

2. 设置自动部署#

3. 推送项目#

`history stack`#

2. window.performance.navigation.type 如果没有`e.persisted`可以通过该属性判断#