打包优化（一）——脚手架项目默认命令 & 自己node+express实现服务器

项目打包优化——脚手架项目默认命令 & 自己node+express实现服务器

脚手架项目默认命令

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

• start 开发环境

• build 项目构建

  • 执行 yarn run build 命令
  • 在当前目录下生成一个build目录，该目录就是打包的结果
  • 可以通过serve这个命令进行测试
    • yarn global add serve
    • serve -s build
  • 通过浏览器地址栏访问项目
    • http://localhost:5000

• test 测试

• eject 释放出webpack配置，但是，这个过程是不可逆的

自己实现服务器

• 基于express实现服务器
  • 前端路由采用h5的历史API的时候，需要做如下处理
  • 拦截所有的url请求，并且统一返回index.html的内容

第一步：安包

npm i express

第二步：新建文件夹sever，里面新建index.js

const path = require('path')
const fs = require('fs')
const express = require('express')
const app = express()

// 启动静态资源服务
app.use(express.static('build'))

// 前端路由采用h5的历史API的时候，需要做如下处理
// 拦截所有的url请求，并且统一返回index.html的内容
app.all('*', (req, res) => {
   
     // 读取index.html文件的内容并返回
  let indexPath = path.join(__dirname,  './build/index.html');
  let index = fs.readFileSync(indexPath, 'utf-8');
    // 返回到客户端
  res.send(index);
});

app.listen(3000, () => {
   
  console.log('running...')
})

第三步:同层级新建文件夹public,里面新建Index.html

<div>
    你好
</div>

第四步：启动服务器

node index.js

第五步：打开界面显示

localhost:3000

或

localhost:3000/index.html

显示效果

.js

第五步：打开界面显示

localhost:3000

或

localhost:3000/index.html

显示效果

转载：https://blog.csdn.net/weixin_44867717/article/details/117433778