前端
一点也不简单

React项目开发流程

git拉取项目

从master主分支拉取项目,不多说

创建React项目环境

首先要考虑好大概的技术栈

例如:React+ antd-mobile+redux

项目搭建

npx create-react-app react-project

项目建立好后,先别急着启动,先思考下是否需要把webpack配置文件抽离出来

配置webpack

配置webpack有两种方式

  1. yarn eject
  2. 根目录创建config-overrides.js文件覆盖原有的webpack配置

antd-mobile 组件库配置

antd-design是一个非常优秀的组件库,但是在使用中是需要进行配置的

  • 生产环境安装antd-mobile
yarn add antd-mobile

antd-mobile需要按照官网的配置说明来

地址: https://mobile.ant.design/docs/react/use-with-create-react-app-cn

说明:

开发配置按需加载

yarn add react-app-rewired customize-cra -D

修改package.json

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

备注:-的要替换成+的

开发安装 babel-plugin-import

yarn add babel-plugin-import -D

 config-overrides.js 里修改配置,增加一个路径别名

const path = require( 'path' )
const { override, fixBabelImports,addWebpackAlias } = require('customize-cra')
module.exports = override(
       fixBabelImports('import', {
         libraryName: 'antd-mobile',
         style: true,
       }),
       addWebpackAlias({
        // [路径名称]: 磁盘路径
        ['@']: path.join( __dirname, 'src' ),
        ['pages']: path.join( __dirname, 'src/component/pages' ),
        ['common']: path.join( __dirname, 'src/component/common' ),
        ['lib']: path.join( __dirname, 'src/lib' ),
        ['store']: path.join( __dirname, 'src/store' ),
        ['assets']: path.join( __dirname, 'src/assets' ),
        ['utils']: path.join( __dirname, 'src/utils' ),
        ['mock']: path.join( __dirname, 'src/mock' )
      })
     );

主入口文件引入css

import 'antd-mobile/dist/antd-mobile.css'

App.js文件测试是否安装好

yarn start启动项目引入Button组件按照官网说明测试

React中配置反向代理

React中配置反向代理和vue不同,我们需要一个http-proxy-middleware依赖

yarn add http-proxy-middleware

然后在src目录下建立一个setupProxy.js文件,这是专门用来配置反向代理的

const proxy = require( 'http-proxy-middleware' )

module.exports = function ( app ) {
  // app.use( 反向代理标识,配置项)
  app.use( proxy('/jucheng', {
    target: 'https://m.juooo.com',
    changeOrigin: true,
    pathRewrite: {
      '^/jucheng': ''
    }
  }))
}

注意:可以配置多个反向代理,但是要求别名完全不同,否则会匹配错误

const proxy = require( 'http-proxy-middleware' )

module.exports = function ( app ) {
  // app.use( 反向代理标识,配置项)
 app.use( proxy('/jucheng', {
    target: 'https://m.juooo.com',
    changeOrigin: true,
    pathRewrite: {
      '^/jucheng': ''
    }
  })),
  app.use( proxy('/daili', {//注意:这里的别名请不要和第一个类似
    target: 'https://m.daili.com',
    changeOrigin: true,
    pathRewrite: {
      '^/daili': ''
    }
  }))
}

项目中遇到的问题和解决方法

赞(2) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » React项目开发流程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏