haroro.github.io

React.v17 + Webpack.v5 多入口 H5 项目模板

项目的基础处理方案

• 基于 Postcss 的处理
  • px2rem 做 px 转 rem
  • autoprefixer 自动添加产商前缀
• 基于 lib-flexible 做的 H5 适配方案
• 基于 babel-loader 做的 jsx 处理
• 基于 mini-css-extract-plugin 做的 css 独立抽离

关于多入口配置

多入口配置路径在 config/webpack.utils.js 中的 devPages 配置项，开发阶段配置空数组则会编译 src/pages 目录下全部入口模块。 将react、react-dom

通用的依赖提取出为vendor.js，如果项目不依赖react，或者为其他如vue的依赖可修改vendors.js依赖

因此建议在开发阶段仅配置需要开发的模块，以提升编译效率。

devPages 参数

devPages: string[] 参数为 src/pages 目录下的每个独立的 react 项目模块名（src/pages/*** 文件夹）。

项目环境变量(NODE_ENV) & 业务环境变量区分(BASE_CONFIG_ENV)

为了区分开发调试的工程环境变量，以及业务接口等环境变量，所以将两种环境变量完全区分开

工程相关的环境变量建议使用 NODE_ENV。

业务接口，业务基础域名等相关的环境变量使用 BASE_CONFIG_ENV。

项目启动相关

yarn
yarn run dev

项目启动访问地址：localhost:8080/[moduleName].html/#/[route] 新版本启动访问地址：localhost:8080/[moduleName]/#/[route]

字段	描述
moduleName	项目模块名，也就是项目 src/pages/xxx，xxx位置对于moduleName
route	项目模块对于的路由

redux 采用 ducks 模式

因为每个redux的模块都是按照功能性去划分，而且每次添加actionTypes、actions、reducer这样的组合。

按照不同文件的方式拆分，甚至拆分到不同的文件夹，绝大部分情况下，只有极少部分情况下 reducer/actions 会用到对应的actions，所以将某一模块功能的代码封装于一个文件中会更加的方便。 当然这样的模式一定是要有明确的模块功能划分，以及命名规范，让 store 可更容易的抽离。

例子🌰

export const moduleName = 'redux-example'
export const reducerName = 'counter'

// action types
const INCREMENT = `${moduleName}/${reducerName}/INCREMENT`

// init state
const initialState = {
  count: 0,
}

// reducer
export default function reducer (state = initialState, action = {}) {
  switch (action.type) {
    case INCREMENT:
      const { count } = state
      return {
        count: count + 1,
      }
    default:
      return state
  }
}

// action creators
export function increment () {
  return { type: INCREMENT }
}

redux需要遵循以下代码风格

• reducer 函数必须用 export default 输出名为 reducer 的函数

    export default function reducer (state, action){/*...*/}
  

• action creators 必须用 export 输出函数形式

    export function increment () {
      return { type: INCREMENT }
    }
  

• 必须用 npm-module-or-app/reducer/ACTION_TYPE 的命名形式来命名 action types，因为到后期很多 reducer，防止命名冲突问题

    const INCREMENT = 'someApp/counter/INCREMENT'
  

• 如果有外部的 reducer 需要监听这个 action type ，或者作为可重用的库发布时， 可以 用 UPPER_SNAKE_CASE 形式 export 它的 action types

END

理论上来说 src/pages 目录下的项目都是独立的，也可以集成别的项目（比如 Vue 等），也可在 src/ 目录下可以存放项目通用组件、工具类通用样式等通用资源。