# pandaWeb5

**Repository Path**: jaasdsa/pandaWeb5

## Basic Information

- **Project Name**: pandaWeb5
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-18
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# web5
## 简介
- 基于`webpack`打包构建
- 借助`webpack`+`qiankun`微前端思想兼容web4
- `web5`采用`react`、`react-router-dom`、`redux`等`react`生态
- 各条业务线通过`library`方法注入主入口`main`工程
- 改造后web4可以使用 `backbone`+`dojo`框架
- web5可以同时书写`js`语法和`typescript`语法,通过`.jsx`、`.tsx`后缀区分

## 初始环境构建
```bash
# webpack 系列
npm i webpack webpack-cli webpack-dev-server html-webpack-plugin webpack-merge add-asset-html-webpack-plugin -D
# 安装react相关的模块 
npm i react react-dom @types/react @types/react-dom react-router-dom @types/react-router-dom react-transition-group @types/react-transition-group react-swipe @types/react-swipe antd @ant-design/icons  react-loadable -S
# 安装redux相关的模块
npm i redux react-redux @types/react-redux redux-thunk  redux-logger @types/redux-logger redux-promise @types/redux-promise immer redux-immer redux-persist connected-react-router -S
# 其它开发工具模块
npm i qs @types/qs classnames axios -S
# typescript 系列
npm i typescript ts-import-plugin ts-loader -D
# babel系列
npm i babel-loader @babel/core core-js@3  @babel/preset-env @babel/preset-react babel-plugin-import  @babel/plugin-proposal-class-properties -D
# 样式及静态文件处理
npm i mini-css-extract-plugin css-loader less-loader less url-loader file-loader autoprefixer postcss-loader postcss-preset-env -D
# webpack优化系列
npm i optimize-css-assets-webpack-plugin terser-webpack-plugin webpack-bundle-analyzer  clean-webpack-plugin cache-loader speed-measure-webpack-plugin  -D
# 其它辅助工具
npm i browserslist copyfiles cross-env concurrently -D 
```
## 模块说明
|模块名 | 中文  |
|:------|:----|
|react  |React是一个用于创建用户界面的JavaScript库  |
|@types/react   |包含React的类型定义    |

## typescript
- [ts配置文档](https://www.tslang.cn/)
- 需要生成一个`tsconfig.json`文件来告诉`ts-loader`如何编译代码TypeScript代码
- 我们可以先全局安装一下`typescript`,然后通过`tsc`命令生成一个`tsconfig.json`配置文件

## 目录结构
```js
`-- web5
    |-- assets   // 存放所有静态资产文件
    |-- dist     // 打包文件
    |-- framework     // 主入口工程
    |-- product       // 产品库
        |-- dma
        |-- pump            
    |-- project      // 项目库
        |-- wuhan   
        |-- shanghai   
    |-- styles
    |-- web4
        |-- framework
        |-- product
    |- webpack
    |-- package.json   // 包管理配置
    |-- package-lock.json   // 包版本锁定配置
    |-- .babelrc.json    // babel配置
    |-- .browserslistrc  // 浏览器兼容性配置  
    |-- tsconfig.json // typescript配置

```
## 打包
```bash
npm run all  # 全部打包
npm run clear # 清除dist目录
npm run main # 主工程打包，应最后打包
npm run dll # 全局依赖 react等周边全部打包到一个类库
npm run framework #公用类库和公用组件的抽象
npm run pump # 二供产品打包，以此类推npm run dma
```