脚手架

安装脚手架

npm install create-react-app -g

查看版本

create-react-app --version

创建项目

create-react-app my-app

启动项目

cd my-app
npm start

依赖

• react: React 框架的核心。

• react-dom: React 视图渲染的核心【基于 React 构建 WebApp（html 页面）】。

• react-native：构建和渲染 App。

• react-scripts：脚手架为了让项目中目录看起来干净一些，把 webpack 打包规则及相关插件都隐藏到了 node_modules 目录下。

"scripts": {
    "start": "node scripts/start.js", 开发环境
    "build": "node scripts/build.js", 生产环境
    "test": "node scripts/test.js", 单元测试
    "eject": "react-scripts eject" 暴露 webpack 配置，一旦暴露，无法还原。
},

暴露配置项后根目录会出现 config 文件和 scripts 文件

config 中

paths.js -> 打包中需要的一些路径管理

webpack.config.js -> 脚手架默认的 webpack 打包规则的配置

webpackDevServer.config.js -> webpack-dev-server 配置

• web-vitals: 性能检测工具

package.json 配置

浏览器兼容

• 对 postcss-loader 生效，控制 CSS3 的前缀
• 对 babel-loader 生效，控制 JS 语法转换

"browserslist": {
    "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
    ],
    "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
    ]
},

遗留的问题：

无法处理 ES6 内置的 API 的兼容，我们需要@babael/polyfill。

脚手架中 react-app-polyfill 已经帮我们引入了，我们只需要在入口文件中引入即可。

import 'react-app-polyfill/ie9'
import 'react-app-polyfill/ie11'
import 'react-app-polyfill/stable'

跨域

src 目录下新建文件 setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function (app) {
    app.use(
        createProxyMiddleware('/jian', {
            target: '',
            changeOrigin: true,
            ws: true,
            pathRewrite: {
                '^/jian': '',
            },
        })
    )
}