如题; 本文所讲架构主要用到技术栈有: Node, Express, React, Mobx, webpack4, ES6, ES7, axios, ejs, log4js, sCSS,echarts,ant desige
使用 Express 初始化 Node 服务
开始本项目首先你的电脑要安装有 node,npm 这个没什么好说的. 其次本次 Node 服务用的框架是 express; 所以要安装: express-generator
然后使用 express your-project 初始化你的 express 项目
npm install express-generator -g // 执行这条命令全局安装 express-generator, 如果你不想全局安装把 - g 去掉即可
初始化 express 项目之后我们开始把 react,webpack 整合到这个 node 服务上.
初始化 React 项目并整合 webpack
这里整合 webpack 使用的是 webpack4 的版本, 如果你熟悉 vue-cli(vue-cli3 之前的版本) 的话你应该会知道 webpack 配置有多少个文件, 这里参考了 vue-cli 生成的 webpack 配置.
添加 src 文件夹
src 文件夹下的内容都是整个 react 的一些核心配置, 如请求处理, css 样式, 公共组件, 路由, 页面, stores 全局状态数据.
配置. babelrc
因为用到 ES6,ES7 语法所以要配置. babelrc 文件. 这个文件东西不多下面直接贴出代码
- {
- "presets": [["es2015", { "modules": false }], "react", "stage-0"],
- "plugins": [
- "transform-decorators-legacy",
- ["import", { "libraryName": "antd", "style": "css" }],
- "transform-runtime"
- ]
- }
修改 Node 服务 app.js
其实主要是加上这句: app.use('/', reactSSR); 其就是为了项目启动的时候开启热更新并渲染 views 中 reactSSR.ejs 这个模板引擎文件从而达到服务端渲染的目的.
项目结构
这里把项目主要的文件夹结构放到最后.
项目 GitHub 地址: https://github.com/Uwah/node-react
后期部署上服务器之后会找个时间更新博客, 主要是用到 pm2
来源: https://www.cnblogs.com/leungUwah/p/9557738.html