使用 create-react-app 脚手架搭建React项目

❀官网

1、安装脚手架:npm install -g create-react-app
2、查看版本:create-react-app -V
!!!注意 Node版本必须是14以上,不然会报以下错误。

使用 create-react-app 脚手架搭建React项目_第1张图片

3、创建react项目(项目名不能包含大写字母):npx create-react-app <项目名称>
  • npx 是 npm 5.2+ 附带的 package 运行工具。
  • create-react-app 创建的项目默认无法看到 webpack 的相关配置,如果想要配置 webpack,需要执行 npm run eject命令
4、运行 react 项目:npm start
5、react中使用video标签显示本地视频不生效问题:

使用require进行引入路径即可。


6、重写脚手架的配置(参考链接):
  • tips: [email protected] 版本需要搭配 customize-cra 使用。
  • 安装: npm i react-app-rewired customize-cra --save-dev
  • 在根目录下新建文件config-overrides.js,写入代码:
    module.exports = function override(config, env) {
      return config
    }
    
  • 重写package.json中的配置:
    使用 create-react-app 脚手架搭建React项目_第2张图片
7、react项目本地代理:
  • create-react-app脚手架若在2.0版本以下
    • 直接在package.json中配置:
      "proxy":{
         "/api":{
            "target":"http://127.0.0.1:3000",  # 代理地址
            "changeOrigin": true,  # 是否允许跨域
            "pathRewrite": {  # 重写路径
                 "^/api": "/"
             },
          }
      }
      
  • create-react-app脚手架若在2.0版本以上配置一个代理:
    • 直接在package.json中配置:
      "proxy": 'http://127.0.0.1:3000' # 只能是字符串
      
  • create-react-app脚手架若在2.0版本以上配置多个代理:
    • 安装 http-proxy-middlewarenpm i http-proxy-middleware --save-dev
    • 在 src 的根目录下新建文件 setupProxy.js(文件名称固定,不能更改),写入代码:
      // http-proxy-middleware V1.0版本以下使用:
      const proxy = require('http-proxy-middleware')
      module.exports = function(app) {
        app.use(
          proxy('/api', {
            target: 'http://localhost:3000/',
            changeOrigin: true,
            // pathRewrite: {
            //   '^/api': ''
            // }
          })
        )
      }
    
      // http-proxy-middleware V1.0版本以上使用:
      const { createProxyMiddleware } = require('http-proxy-middleware');
      module.exports = function (app) {
          app.use(
            createProxyMiddleware('/api', {
              target: 'http://127.0.0.1:3000',
              secure: false,    # 指定Cookies能否被用户读取
              changeOrigin: true,
              pathRewrite: {
                  "^/api": "/"
              },
            }),
            createProxyMiddleware('/api1', {
              target: 'http://127.0.0.1:3001',
              secure: false,    # 指定Cookies能否被用户读取
              changeOrigin: true,
              pathRewrite: {
                  "^/api1": "/"
              },
            })
          );
      };
    
8、配置多环境打包(官网文档):
  • 安装 dotenv-cli :npm i dotenv-cli -D
  • 新建环境文件,并且写入路径:路径必须以 REACT_APP 开头使用 create-react-app 脚手架搭建React项目_第3张图片
  • 修改 package.json 中的 scripts来指定环境:
    使用 create-react-app 脚手架搭建React项目_第4张图片
  • 执行 npm run build:dev 即可
  • index.html文件中使用:%REACT_APP_URL_API%
  • js/jsx文件 中使用:process.env.REACT_APP_URL_API
9、打包上线后,静态资源css和js报404:
  • 需要在package.json文件中添加"homepage": "./"进行重新打包即可。
    使用 create-react-app 脚手架搭建React项目_第5张图片

你可能感兴趣的:(React,react.js,webpack,javascript)