增加React-typescript项目

Author: mjyg

note.md

@@ -0,0 +1,70 @@
+组件化
+
+性能优化：
+* webpack缓存压缩分包Tree Shaking
+* webpack 组件动态加载,公共资源打包
+* DOM数量控制
+* CSS GPU加速, CSS Matrix
+* 前端性能监控，通过可视化图表展示性能指标数据
+* FCP/FMP
+* sdk
+* 减少首屏时间：
+    * 利用浏览器缓存策略缓存静态资源，异步import模块减少首屏js体积
+    * 在webpack中配置首屏预渲染内容。前置SPA应用FCP时间
+    * React的state批处理，PureComponent,memo减少组件不必要的更新渲染
+
+React:
+* 源码
+* 使用hook函数式组件构建通用组件（form,table）
+* 自定义hook（request,节流函数）提升团队开发效率
+* React 同构
+
+CI/CD
+
+单元测试
+
+eslint配置
+
+babel配置
+
+脚手架
+对vue-cli做二次封装
+
+pm2
+
+CSS:
+* BEM+原子CSS命名规范，规范化开发
+* css-houdini
+* next
+* 矩阵
+
+V8
+* 快属性 慢属性
+
+node中间层，接口的削减
+
+koa：
+* 搭建中间层
+* 洋葱模型
+
+typescript:
+* vue组件，简单的语法
+
+网络协议：
+* TCP/IP
+* HTTP
+* HTTP2
+
+技术栈：sdk + rollup + FCP/FMP
+
+new Vue({})为什么属性越多越慢？
+V8快属性，慢属性 -> 词法解析，语法解析 -> ast -> 字节码 -> ao vo go -> 收集代码信息 -> 优化字节码 生成机器码
+
+工程化： CI/CD webpack原理 webpack5工程化
+
+前端安全：xss csrf webshell 劫持 beem 中国菜刀 web渗透
+
+webpack集群编译
+
+types-react
+

src/project/config/webpack.development.js

@@ -0,0 +1,30 @@
+const {join} = require('path')
+var FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
+const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
+
+
+module.exports = {
+  devServer:{
+    contentBase:join(__dirname, "../dist"),
+    hot:true,
+    quiet:true,
+    historyApiFallback:true,
+  },
+  plugins: [
+    new FriendlyErrorsWebpackPlugin({
+      compilationSuccessInfo: {
+        messages: ['You application is running here http://localhost:3000'],
+        notes: ['Some additionnal notes to be displayed unpon successful compilation']
+      },
+      onErrors: function (severity, errors) {
+        // You can listen to errors transformed and prioritized by the plugin
+        // severity can be 'error' or 'warning'
+      },
+      clearConsole:true
+    }),
+    new WebpackBuildNotifierPlugin({
+      title: "My Webpack Project",
+      suppressSuccess: true, // don't spam success notifications
+    })
+  ],
+}

src/project/dist/main.js

@@ -0,0 +1,14 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	
+/******/ 	
+/******/ })()
+;

src/project/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "project",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "path": ".",
+  "scripts": {
+    "dev": "echo 111",
+    "test": "echo 222",
+    "start": "npm run dev && npm run test",
+    "start2": "npm run dev & npm run test",
+    "client:dev": "scripty",
+    "client:server": "scripty"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router": "^5.2.0",
+    "scripty": "^2.0.0",
+    "yargs-parser": "^20.2.9"
+  },
+  "devDependencies": {
+    "@nuxtjs/friendly-errors-webpack-plugin": "^2.1.0",
+    "awesome-typescript-loader": "^5.2.1",
+    "friendly-errors-webpack-plugin": "^1.7.0",
+    "html-webpack-plugin": "^5.3.2",
+    "webpack": "^5.45.1",
+    "webpack-build-notifier": "^2.3.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-merge": "^5.8.0"
+  }
+}

src/project/scripts/client/dev.sh

@@ -0,0 +1,2 @@
+#webpack 开发
+webpack --mode development

src/project/scripts/client/prod.sh

@@ -0,0 +1,2 @@
+# webpack 上线
+webpack --mode production

src/project/scripts/client/server.sh

@@ -0,0 +1,2 @@
+#本地的开发环境
+webpack-dev-server --mode development --open

src/project/src/web/components/Home/index.tsx

@@ -0,0 +1,10 @@
+import *  as React from 'react'
+
+const Home = ()=>{
+  return (
+    <div>基础的Home组件
+      </div>
+  )
+}
+
+export default Home

src/project/src/web/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>单页开发环境</title>
+</head>
+<body>
+<div id="main"></div>
+<style>
+  :root {
+    --bgColor:yellow
+    --x:()=>{console.log(12)}
+  }
+  body{
+    --bodyBgColor:black
+    background:var(--bodyBgColor)
+  }
+  span{
+    color: var(--bgColor)
+  }
+</style>
+</body>
+</html>

src/project/src/web/index.tsx

@@ -0,0 +1,21 @@
+// interface Person {
+//   str:string
+// }
+//
+// class Index {
+//   private data:Person;
+//
+//   constructor(data:Person) {
+//    this.data = data
+//   }
+//
+//   log(){
+//     console.log(this.data)
+//   }
+// }
+
+import * as React from 'react'
+import * as ReactDom from 'react-dom'
+
+import App from './pages/App'
+ReactDom.renser(<APP/>,document.getElementById('main'))