一、前端救命划分：印记中文 - 深入挖掘国外前端新领域

起因是接了个老项目，里面技术栈和前五篇内容是一点不一样啊...
印记中文挺好的里面有每个技术栈的官网链接；

1、web 框架

1、React

性质：构建用户界面的 JavaScript 库；

2、路由跳转：react-router-dom

1、v5：依旧十分钟学会在TypeScript使用react路由

特征：useHistory
跳页面与传参

history.push('/home', { a:1 })

2、v6：「React进阶」react-router v6 通关指南 - 掘金 (juejin.cn)

路由跳转2

let pages = {};
function register(pathname, page) {
  if (!pages[pathname]) {
    pages[pathname] = page;
  } else {
    throw new Error(`"${pathname}" Already exist`);
  }
}

/**
 *
 * 路由注册
 *
 */

//就诊评价页
register("/my-target.html", MyTarget);

MyTarget可以是个.js也可以是个路径，Verify下的index.js
import MyTarget from '../../component/Verify/index'
MyTarget是后面路径的自己命名；

3、状态管理

1、Redux

性质：JavaScript 状态容器，提供可预测化的状态管理；

2、React Redux

性质：React官方主推的一套Redux模式

4、CSS

1、Less

性质：Less 是 CSS 预处理语言，使 CSS 更易维护和扩展
顺手的语法糖：Less语法介绍以及和CSS的区别(整理版)_less css_DC...的博客-CSDN博客

5、小程序框架

1、Taro

性质：Taro 是一套遵循 React 语法规范的多端开发解决方案。

6、Node.js & Deno

1、Node.js

性质：基于 V8 引擎的 JavaScript 运行环境

服务器端的运行时环境（以前大学用的tomcat 眼泪掉下来）

2、npm

性质：是 JavaScript package 管理工具，在这里可以找到可复用代码，并以强大的全新方式进行聚合

7、编译构建

1、最简单的React项目

部署参考：前端项目(react)部署到服务器

项目打包，生成build或者dist文件（js+Toolkit是生成build文件）

通过ftp之类的工具把打包后的文件上传到服务器指定目录即可
start为通过本地访问
本地一般为beta域名，和正式会有不同，例如：//TODO 待补充

改写端口号参考：用create-react-app创建的项目，如何修改默认监听的端口号3000_锦天的博客-CSDN博客

里面提到了使用cross跨端；

2、webpack

性质：用于现代 JavaScript 应用程序的静态模块打包工具
细节：

webpack.config.js里可以看见端口号:const PORT = '8093';
起头：http://localhost:8093/

关于项目部署：和最简单的React项目差不多；有些流水线自动化的有像Jenkins那样的功能。
这边可以查看端口号

webpack打包html webpack的基本使用（详解）1-打包js、html、css

3、Babel

性质：一个编译工具，让你可以项目中直接使用下一代 JavaScript

4、TypeScript

性质：JavaScript 超集

8、代码风格检测

1、 eslint

性质：可组装的、用于 JavaScript 和 JSX 的代码检查工具

9、UI库系列

1、ANTD

2、Vue(Mobile)

代表是Vant

10、H5

1、性质：新一代的html语言；

2、参考网站：HTML5 教程 | 菜鸟教程 (runoob.com)

特征是 <!DOCTYPE html>
使用ReduxToolKit构建的项目里我们可以看到他的**入口index.html（**public下）用的就是h5；
PS：React这套构建用户界面的 JavaScript 对应入口是index.js

其中的root.render就是对index.html里id="root"的div模块进行UI操作；

11、Hybrid混合开发

1、参考：前端跨端哪些事之Hybrid

12、浏览器配置

1、指定key与服务器联动改host：查看和编辑本地存储 - Microsoft Edge Development | Microsoft Learn

有些项目可以在src-react下配置config文件；
有些域名封在第三方组件里的用这个替换也好用(userWebApiDomain)

2、保留日志：firefox的network打开preserve log(保留日志） - 简书 (jianshu.com)

作用：页面快速跳转后也能看到中间发生了什么，其他浏览器配置方法也差不多；

扯闲篇：

1、后端原本用jsp可以写java代码，后来有SpringBoot取代。

二、实践

一、Webpack

1、webpack react 错误整理

2、node.js - webpack + React 问题: It looks like you're using a minified...

3、Webpack4+Babel7优化70%速度

4、实践！使用Webpack搭建【React + TS】开发环境

解决问题：Using babel-preset-react-app requires that you specify NODE_ENV or BABEL_ENV environment variables

使用cross-env【兼容Mac和Windows编译环境】
如果出现了&& windows也是支持的
npm运行项目的时候报错'cross-env'
spawn webpack ENOENT解决方法_error: spawn webpack enoent

5、细节说明

这边可以配置一个快捷索引；方便import；

二、Less

1、学习Less-看这篇就够了

三、散记

知识库一：Web 开发技术 | MDN (mozilla.org)
知识库二：HTML DOM 方法 | 菜鸟教程 (runoob.com)

1、 Window:

1、 window 对象表示一个包含 [DOM]文档的窗口;

2、DOM（Document Object Model——文档对象模型）

HTML DOM 教程 | 菜鸟教程
是用来呈现以及与任意 HTML 或 XML 文档交互的 API，DOM 并不是天生就被规范好了的，它是浏览器开始实现JavaScript时才出现的；
HTML DOM 定义了访问和操作 HTML 文档的标准方法

3、localStorage：允许在浏览器中存储 key/value 对的数据，永久的，除非自己删除；

4、JS语法

1、match() 返回的是数组，对象名可直接取值：JavaScript match() 方法 | 菜鸟教程

2、|| 有种与的用法比较有意思：document.title = areaTitle[unionId[1]] || "测试";

如果左边为false/数组下标越界/null，title会是右边的测试

5、axios发起网络请求

1、使用见react hook文章，值得一提的是，可以不指定bean类，给个空数组，data直接传给他，安卓有个bean类用工具直接转。

  const [records, setData] = useState([]);
  useEffect(() => {
    queryMessage(params)
      .then((resp) => {
        setData(resp.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

5、OSS

1、定义：「OSS」的英文全称是Object Storage Service，翻译成中文就是「对象存储服务」，官方一点解释就是对象存储是一种使用HTTP API存储和检索非结构化数据和元数据对象的工具。

6、CDN

1、定义

参考文章：到底什么是CDN
就近假设服务器缓存，近的没有就从远端拉来下发，再保留一份；

2、用阿里云发流水线可能会有cdn缓存，各个公司有自己的刷新cdn方法，后台刷下bundle链接；

webpack打包后的bundle.js为何能运行在浏览器中

7、ERP

1、定义：简单来说就是企业管理系统,指的是企业资源计划，是企业内部所有业务部门之间，以及企业同外部合作伙伴之间交换和分享信息的系统，是集成供需链管理的工具、技术和应用系统。

四、编译环境

1、package.json文件中依赖包前的~^代表什么？

使用〜0.13.0，自动更新末尾的次版本；
使用^0.13.0，自动更新补丁版本和次版本；
不用前缀，使用确定版本；

其他

1、技术胖-我项目中用的20个轮子开发效率提升200%

2、通俗易懂：usb和串口的区别_串口和usb有什么区别

3、关于阿里云效流水线

显示合并冲突：因为会把当前流水线分支合入虚拟master；
一旦运行成功就会部署上服务器，有改动重新运行即可，一般前端不会主动删除服务器部署的内容；

1、ES5/6语法 ECMAScript 6 简明教程 | 菜鸟教程

1、ES6 教程详解：ES6 教程

他是JavaScript第六代语言标准

2、UI组件

import ReactSwipe from 'react-swipe' 轮播标签；

【前端笔记】一、项目中遇见的技术栈划分