框架篇： React + React-Router + antd + nodejs + express框架搭建（nodejs做前后端server）

人生过半 發表於 2019-6-30 12:18:00

框架篇： React + React-Router + antd + nodejs + express框架搭建（nodejs做前后端server）

前提： nodejs >= 10.0; 
这里不推荐用官网的yarn安装antd的模块，因为后续会出错，错误如图：
<img src="https://img2018.cnblogs.com/blog/1154698/201906/1154698-20190628074603362-1260098764.png">
 
也不推荐用npx方法来搭建react骨架，也会出错，让我们开始吧！！
 
<hr>
 
前端React+Antd框架搭建
 
1.安装并启动create-react-app骨架应用
 
打开cmd按顺序执行以下指令：
 
npm install -g create-react-app   (全局安装create-react-app，默认会安装在C盘个人用户下）
create-react-app my-app （此步安装my-app以及需要的模块到当前文件夹下）
cd my-app （进入到my-app目录）
npm start　（启动react项目Demo，可输入localhost:3000进入看demo）
结果如图所示：
<img src="https://img2018.cnblogs.com/blog/1154698/201906/1154698-20190617215325172-517243316.png">
 
2.引入antd
 
①npm install antd --save-dev
 
②修改 <code>src/App.js</code>，引入 antd 的按钮组件，代码如下：
<div class="cnblogs_code">
<pre>import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';

class App extends Component {
render() {
return (
 <div className="App">
 <Button type="primary">Button</Button>
 </div>
 );
}
}

export default App;</pre>
</div>
 
③修改 <code>src/App.css</code>，在文件顶部引入 <code>antd/dist/antd.css</code>。
 
<div class="cnblogs_code">
<pre>@import '~antd/dist/antd.css';

.App {
text-align: center;
}</pre>
</div>
 
④执行npm run start，结果如图
<img src="https://img2018.cnblogs.com/blog/1154698/201906/1154698-20190630103055085-585577868.png">
 
3.高级配置
 
我们现在已经把组件成功运行起来了，但是在实际开发过程中还有很多问题，例如上面的例子实际上加载了全部的 antd 组件的样式（对前端性能是个隐患）。
此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 react-app-rewired （一个对 create-react-app 进行自定义配置的社区解决方案）。
引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，我们还需要安装 customize-cra。
 
①npm install react-app-rewired customize-cra --save-dev
 
②更改package.json
<div class="cnblogs_code">
<pre>/* 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",
+ "test": "react-app-rewired test",
}</pre>
</div>
 
③然后在项目根目录创建一个 <code>config-overrides.js</code> 用于修改默认配置。
<div class="cnblogs_code">
<pre>module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};</pre>
</div>
 
④引入babel插件，执行指令：npm install babel-plugin-import --save-dev
 
⑤更改config-overrides.js文件
<div class="cnblogs_code">
<pre>const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);</pre>
</div>
 
⑥移除前面在 <code>src/App.css</code> 里全量添加的 <code>@import '~antd/dist/antd.css',并且</code>修改App.js
<div class="cnblogs_code">
<pre>import React, { Component } from 'react';
import { Button } from 'antd';
import './App.css';

class App extends Component {
render() {
return (
 <div className="App">
 <Button type="primary">Button</Button>
 </div>
 );
}
}

export default App;</pre>
</div>
  
⑦执行命令npm run start，发觉服务已正常启动，至此我们的react+antd框架已搭建完毕
 
<hr>
 
后台nodejs+express框架搭建与服务合一
 
1.express骨架搭建
 
①我们在react根目录下建立server文件夹，如图
<img src="https://img2018.cnblogs.com/blog/1154698/201906/1154698-20190630113801134-188091814.png">
 
②我们cd进server文件夹，执行express骨架生成器指令：npm install express-generator -g
 
③执行语句：express --view=pug .
 
④执行语句：npm install，执行完了后，我们执行npm run start（这里先关掉react的服务），执行结果如图：
<img src="https://img2018.cnblogs.com/blog/1154698/201906/1154698-20190630114513108-1128412784.png">
 
2.服务合一
 
①到这一步，让我们想想，前后端同样是以nodejs+server为基础的，难道我们需要起两个服务不成？当然不对啊。
　我们重新进到react的根目录，执行指令：npm run build
 
②我们将根目录build目录下的文件全部拷贝至server/public目录，然后我们刷新一下网页。诶，出来了。
 
③在最终部署服务环节时，我们即需要用服务合一的方法来部署运行服务（非开发阶段使用，开发阶段使用在下一章会讲解）。
<img src="https://img2018.cnblogs.com/blog/1154698/201906/1154698-20190630120331259-1689389304.png">
 
<hr>
 
 
后续：诶，标题不是有router么？怎么没有router相关的么？到这里，其实我们已经把相关框架大致都搭好啦。
 
下一章我们讲具体该如何运用这个框架进行开发，就不放在这章讲了，不然太长啦！！ 
来源：https://www.cnblogs.com/tianshu/p/11108576.html

頁: [1]

琼殿技术论坛's Archiver

框架篇： React + React-Router + antd + nodejs + express框架搭建（nodejs做前后端server）