webpack工程化集成React技术栈(一)
项目开始前,我们先聊一聊关于项目的一些说明。该项目起始于2017年初,当时公司主要技术栈为gulp+angular,鉴于react的火热的生态,在公司决定研发bss管理系统时选用react开发,目的也是为react native打下基础,以解决后期公司大前端技术栈的逐步成熟。(当时没有选择vue开发的主要原因是weex生态还不够特别成熟),既然决定换新,项目的构建也跟着一起换,从gulp转向火热的webpack,持续大半年的更新迭代,我们将构建模块逐步从项目中抽离出来,把构建模块作为npm包单独管理,完成和项目代码解耦,于是就有了后面我们要说的wci-build构建模块包和wci-cli项目脚手架。 我们要做什么技术栈项目采用前后端分离的形式,后端选用Maven+SpringClould全家桶开发,前端选用webpack+react全家桶开发,前后端全部采用包管理工具完全解决项目依赖管理的难题,版本管理采用git,前后端通过json交互,swgger管理接口文档,接口全部遵循restful规范。由于本文面向社区开放,故本文中不涉及公司业务层的代码,本文全部代码均为最新编写,我们以一个旅游管理系统的三个模块为大家演示项目(登陆登出、用户模块、景点模块)。为了快速开展,本文涉及的后端代码直接采用Java的SSM框架搭建,源码也将为大家奉上。朋友们也可以使用mock模拟接口数据。后期我们在演示nodejs+espress时将接口代码全部转为node形式。 准备因本文不是讲解基础,故大家在敲代码前,还需要具备一定的前端基础,部分如下
解决什么问题本项目集成了最新的react16、react-router4、redux,同时可以选择性集成antd|antd mobile,在解决繁琐的架构配置工作外,还解决了以下问题 通用问题
其他问题
还有什么问题要解决虽然经过大半年迭代,但我们还需要在实际项目开发中支持更多的个性化需求
希望大家在开发过程中遇到任何问题,希望可以给我们留言,我们会不断优化项目。未来,我们还会加入mobx、rxjs、immutablejs、GraphQL等,也希望在和大家的探讨中,持续进步。 项目准备本项目基础环境必须依赖nodejs和npm,未安装的朋友可以去官网自行安装,安装教程这里不详细说明,安装完成后使用如下命令,查看是否安装成功。 node -v npm -v 初始化项目本项目我们使用wci-cli脚手架初始化项目
npm install -g wci-cli
wci-cli 脚手架可以创建三种项目,分别是1.纯净的react项目 2.包含antd的react项目 3.包含antd-mobile的react项目,命令如下 wci new myapp 执行命令后,命令行会提示是否需要安装antd以及选择antd类型,即可完成项目初始化,如下
项目目录 myapp ├── app // 项目业务代码 │ ├── assets // 静态文件目录(图片、字体等) │ ├── script // js代码目录 │ │ ├── actions // redux action目录 │ │ ├── componets // react 无状态组件目录 │ │ ├── containers // react 业务代码 │ │ ├── reducers // redux reducer目录 │ │ ├── util // 工具包目录 │ │ │ ├── theme.js // antd自定义样式文件 │ │ ├── Home.js // 首页 │ │ ├── home.less // 首页样式 │ ├── styles // 全局样式目录 │ ├── index.js // 项目入口文件 │ ├── index.tpl.html // 项目html模版 ├── node_modules // 依赖包目录 ├── .babelrc // babel配置文件 ├── .eslintrc // eslint代码校验配置文件 ├── .gitignore ├── package.json ├── README.md ├── wci.json // wci项目配置文件(主要配置一些开发、测试、生产环境的信息) └── webpack.js // webpack自定义配置文件 执行如下命令,运行开发环境 cd myapp npm run start
如上图,我们的项目已经跑起来了...
因我们需要保证测试代码和生产代码必须保持一致,所有在实际项目中,我们可以运行如下命令构建代码 npm run test // 测试环境打包 npm run dist // 生产环境打包 测试代码 生产代码 到这里,我们已经完成项目前期开发的所有准备工作,接下来,我们一起开始撸代码吧 项目结束后,我会为大家奉上两篇彩蛋,分别是 1. 一步步搭建webpack前端构建工具并抽成npm单独模块 2. 一步步构建自己的npm开发包并且以一个真实例子演示(开发一个命令行生成文件夹结构的小工具) 还要说一点正式开始撸代码前,还要针对项目具体说明,包括项目代码目录介绍,前后端分离项目需要注意哪些问题,前后端如何鉴权等... 都是干什么的myapp ├── app // 项目业务代码 │ ├── assets // 静态文件目录(图片、字体等) │ ├── script // js代码目录 │ │ ├── actions // redux action目录 │ │ ├── componets // react 无状态组件目录 │ │ ├── containers // react 业务代码 │ │ ├── reducers // redux reducer目录 │ │ ├── util // 工具包目录 │ │ │ ├── theme.js // antd自定义样式文件 │ │ ├── Home.js // 首页 │ │ ├── home.less // 首页样式 │ ├── styles // 全局样式目录 │ ├── index.js // 项目入口文件 │ ├── index.tpl.html // 项目html模版 ├── node_modules // 依赖包目录 ├── .babelrc // babel配置文件 ├── .eslintrc // eslint代码校验配置文件 ├── .gitignore ├── package.json ├── README.md ├── wci.json // wci项目配置文件(主要配置一些开发、测试、生产环境的信息) └── webpack.js // webpack自定义配置文件 以上是代码的全部目录,下面我们根据功能依次介绍:
node_modules: npm依赖包目录,开发者可以不用管,只要知道我们项目里所有的依赖都下载在这个文件夹下
.babelrc:babel配置文件,可以配置部分自定义babel插件(例如本项目里antd自定义主题和javascript@语法糖就在这里配置) 说明:这两个模块本该配置在wci-build构建工具里,但考虑到项目的灵活性,所有抽离出来放在项目根目录
webpack.js:webpack loader个性化的配置文件,可以自定义添加webpack loader
wci.json:项目的配置文件,可以自定义配置项目 { "index": "app/index.js",// 项目入口文件 "hostname": "127.0.0.1",// 开发环境IP地址(可以配置域名通过本地host转发) "name": "wci-antd-app",// 项目名称(显示在浏览器title里的名字) "libs": [ // 项目的公共包,后续可以自行添加 "react","react-dom","axios","classnames","prop-types","react-redux","react-router-dom","redux","redux-thunk" ],"dev": { // 开发环境配置 "port": 8031,// 开发环境端口 "src": "app",// 开发环境监听目录 "api": "",// 开发环境后端接口地址 "module": {},// 开发环境的模块包 "is_eslint": false // 开发环境是否开启eslint校验 },"test": { // 测试环境配置 "module": {},// 测试环境的模块包 "api": "" // 测试环境后端接口地址 },"prod": { // 生产环境配置 "module": {},// 生产环境的模块包 "api": "" // 生产环境后端接口地址 } }
项目目录 ├── app // 项目业务代码 │ ├── assets // 静态文件目录(图片、字体等) │ ├── script // js代码目录 │ │ ├── actions // redux action目录 │ │ ├── componets // react 无状态组件目录 │ │ ├── containers // react 业务代码 │ │ ├── reducers // redux reducer目录 │ │ ├── util // 工具包目录 │ │ │ ├── theme.js // antd自定义样式文件 │ │ ├── Home.js // 首页 │ │ ├── home.less // 首页样式 │ ├── styles // 全局样式目录 │ ├── index.js // 项目入口文件 │ ├── index.tpl.html // 项目html模版 如上,因为react遵循组件化开发,故我们的业务代码全部写在
其他版本管理:推荐使用gitflow来进行版本的管理,这里不做详细描述 前后端分离跨域:一旦项目采用前后端分离,跨域是所有项目里不可避免的问题,目前跨域的解决方案主要有三种
我们这里采用方式2 java代码 response.addHeader("Access-Control-Allow-Origin","*"); response.addHeader("Access-Control-Allow-Credentials","true"); response.addHeader("Access-Control-Allow-Headers","Content-Type,Content-Token,Content-User,X-Requested-With"); nodejs 代码 res.header("Access-Control-Allow-Origin","*"); res.header("Access-Control-Allow-Headers",X-Requested-With"); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By",' 3.2.1') res.header("Content-Type","application/json;charset=utf-8"); 这种方式还可以自定义请求头的认证信息 不明白的朋友可以去看阮一峰大神的这篇文章 未完待续 更新于2018-02-26 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |