# pure-react-project

**Repository Path**: xiaoguoyao/pure-react-project

## Basic Information

- **Project Name**: pure-react-project
- **Description**: 纯净完成的react应用框架，覆盖开发构建到打包的整体流程
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-18
- **Last Updated**: 2022-09-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 🎁 自由纯净的react应用框架

#### 快速开始 ✨：
```
git clone https://gitee.com/xiaoguoyao/pure-react-project
```

#### 依赖包安装 🔧

```
//推荐使用pnpm（快准狠），node版本需要在v14.19以上
pnpm install 

//或者
yarn install

//或者
npm install
```

#### 启动 ⏸：
```
pnpm run start

//或者
npm run start

//或者
yarn start
```

### 使用文档


#### alias
- Type：`object`
- Default：`{}`

配置别名，对引用路径进行映射。
比如：
```
export default {
  alias: {
    foo: '/tmp/a/b/foo',
  },
};
```
然后 `import('foo')`，实际上是 `import('/tmp/a/b/foo')`。

脚手架内置了以下别名：

 - @，项目 src 目录
 - ~，项目所在的根目录


#### esbuild
- Type：`object`
- Default：`false`

用来提速编译打包速度

```

```

#### devtool
- Type: ``string``
- Default: ``cheap-module-source-map`` in dev, false in build

用户配置 sourcemap 类型。

常见的可选类型有：

- eval，最快的类型，但不支持低版本浏览器，如果编译慢，可以试试
- source-map，最慢最全的类型

更多类型详见[webpack#devtool](https://webpack.js.org/configuration/devtool/#devtool)配置。

#### proxy
- Type：`object`
- Default：`{}`

配置代理
```
export default {
  proxy: {
    '/api': {
      'target': 'http://jsonplaceholder.typicode.com/',
      'changeOrigin': true,
      'pathRewrite': { '^/api' : '' },
    },
  },
}
```
> 注意：proxy 配置仅在 dev 时生效。

#### provide
- Type：`object`
- Default：`{ React: 'react' }`

自动加载模块，而不必每个文件写import，默认配置效果等同如下
```
import React from 'react'
```
更多配置参考[ProvidePlugin](https://webpack.docschina.org/plugins/provide-plugin/#root)


#### devServer
- Type：`object`
- Default：`{}`

配置开发服务器。

包含以下子配置项：

- port，端口号，默认 8000
- host，默认 0.0.0.0
- https，是否启用 https server，同时也会开启 HTTP/2
- writeToDisk，生成 assets 到文件系统



#### jsObfuscator
- Type：`boolean`
- Default：`false`

是否对代码进行加密混淆。

> 注意：非必要勿开启，此功能影响编译和打包速度和文件体积，所以只在production模式生效



#### sass
- Type：`boolean`
- Default：`false`

开启sass，用来支持sass样式写法。




#### hash
- Type：`object`
- Default：`{}`

配置是否让生成的文件包含 hash 后缀，通常用于增量发布和避免浏览器加载缓存。


#### analyze
- Type：`object`
- Default：`{}`

包模块结构分析工具。通过 ANALYZE=1 pure build 或 ANALYZE=1 pure dev 开启，默认 server 端口号为 8888，更多配置如下：
```
{
  // 配置具体含义见：https://github.com/umijs/umi-webpack-bundle-analyzer#options-for-plugin
  analyze: {
    analyzerMode: 'server',
    analyzerPort: 8888,
    openAnalyzer: true,
    // generate stats file while ANALYZE_DUMP exist
    generateStatsFile: false,
    statsFilename: 'stats.json',
    logLevel: 'info',
    defaultSizes: 'parsed', // stat  // gzip
  }
}
```

#### Web Workers

使用webpack5版本，开箱即用，无需worker-loader。

语法：
```
new Worker(new URL('./worker.js', import.meta.url));
```
点击查看具体 [例子](https://webpack.js.org/guides/web-workers/#example)






#### 技术细节

##### 已完成 😃：
- [X] ~~处理静态资源图片：jpg、png、jpeg、gif，使用：webpack5自带的asset resource~~
- 注：webpack4是使用url-loader、file-loader处理
- [X] ~~处理es6、ts语法，使用：babel-loader、esbuild~~
- 注：默认是babel-loader，开启加速编译使用是esBuild
- [X] ~~处理样式文件：使用style-loader、less-loader、sass-loader、css-loader、postcss-loader~~
- [X] ~~开启热更新~~
- [X] ~~source-map~~
- [X] ~~使用nodemon增加webpack配置修改时热启动~~
- [X] ~~显示编译进度~~
- [X] ~~实现defineConfig配置文件，作为项目配置项（参考UMI）~~
- [X] ~~配置别名alias~~
- [X] ~~devServer配置~~
- [X] ~~analyze配置~~
- [X] ~~增加本地代理能力proxy~~
- [X] ~~编译缓存提速=> v8-compile-cache （参考umi源码）~~
- [X] ~~启用文件hash后缀配置，用于增量发布避免浏览器加载缓存~~
- [X] ~~做ts-loader和babel-loader的选型（暂定采用babel0loader）~~
- [X] ~~增加全局配置环境变量能力process.ENV~~
- [X] ~~增加workerLoader功能配置~~


#### ing...

- [ ] 增加esbuild配置，编译的功能提速
- [ ] 考虑将打包代码压缩使用esbuild支持配置方式，以及增加swc（基于resut的压缩）[地址](https://github.com/webpack-contrib/terser-webpack-plugin#esbuild)

##### TODO 🌈：

- [ ] 1、通过.env文件区分不同环境的配置，例如webpack配置
- [ ] 2、webpack配置修改时热启动不重开窗口（实现到umi类似）
- [ ] 5、实现配置路由（参照UMI）
- [ ] 6、scripts配置额外脚本
- [ ] 8、增加通过chainWebpack修改webpack配置
- [ ] 9、增加loader优化：cache-loader、thread-loader，或采用webpack5的cache功能
- [ ] 10、支持配置路由和约定路由（有难度）
- [ ] 11、使用dvajs数据流，自动收集model，使用dvajs实现+context
- [ ] 12、插件化实现（考虑中）
- [ ] 13、全部使用esm写法，例如ts的支持
- [ ] 14、@babel/polyfill解决兼容问题，优化
- [ ] 15、多环境配置（参考umi）
- [ ] 16、umi webpack命令查看umi的webpack配置
- [ ] 17、添加postcss启停的配置，并补全文档（参考create-react-app）
 - [ ] **其他未细化的需求**



#### Feature 🚀：

- [ ] 微前端实践
- [ ] 使用cli命令行进行安装