react yarn run build 输出文件目录结构

转载

mob64ca13fae001 2024-07-22 19:57:57

文章标签 react.js 学习 webpack 数据数组 文章分类 Yarn 大数据

一、安装

$ create-react-app [Project name]

默认支持sass

二、核心依赖

react：react 核心

react-dom：用于开发渲染web 应用；

react-scripts：封装webpack服务；

"start": "react-scripts start",// 开发环境
    "build": "react-scripts build",// 生产环境打包
    "test": "react-scripts test",// 单元测试
    "eject": "react-scripts eject"// 暴露配置，用于自定义修改

react-native：用于开发渲染 App 应用；

三、暴露配置文件

$ yarn eject

新增文件

config 文件夹：react框架webpack的配置
scripts 文件夹：项目运行的构建脚本文件

配置修改

1、解决eslint报错

// package.json 
"babel": {
    "presets": [
      [
        "babel-preset-react-app",//使用开发环境
        false
      ],
      [
        "babel-preset-react-app/prod",//使用生产环境，会影响控制台不打印警告等信息
        {
          "runtime": "automatic"// 可以不用单独在组件中引入React
        }
      ]
    ]
  }

常见配置修改

移除默认的 sass，使用 less 替换；config\webpack.config.js
增加别名：@==》src；config\webpack.config.js

alias: {
        '@': paths.appSrc,

修改端口号

// scripts\start.js
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';
// 方式一：直接修改
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 9527;
const HOST = process.env.HOST || '127.0.0.1';
// 方式二：修改环境变量 process.env
// 安装：yarn add cross-env
// 修改启动脚本："start": "cross-env PORT=9527 node scripts/start.js",

修改浏览器兼容：package.json==>browserslist

// 这里可以实现对【postcss-loader:控制css3的前缀】生效
// 这里可以实现对【babel-loader:控制ES6的转换】生效
// 还有一个ES6内置API的转换需要额外配置【@babel/polyfill】；
方式一：在入口文件之间引入该依赖包；
方式二：使用提供的react-app-polyfill（react对上面依赖包的重写）
// 入口文件引入

配置开发环境反向代理

// src\setupProxy.js
// yarn add http-proxy-middleware
// vue 代理
 devServer: {
    port: 8080, // 本地跑的端口，默认是8080，
    proxy: {
      "/api": {  // 请求路径中含 /api
        target: "http://localhost:9000", 目标服务器
      },
    },
  }
//react 代理
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
  app.use(
    createProxyMiddleware('/jian', {
      target: 'https://www.jianshu.com/asimov',
      changeOrigin: true,
      ws: true,
      pathRewrite: { '^/jian': '' },
    })
  );
  app.use(
    createProxyMiddleware('/zhi', {
      target: 'https://news-at.zhihu.com/api/4',
      changeOrigin: true,
      ws: true,
      pathRewrite: { '^/zhi': '' },
    })
  );
}

四、MVC和MVVM

react 思想

MVC：model数据（state）> view视图 > controller 控制器 > model数据

数据驱动视图，
视图改变数据，需要开发者手动实现；

vue 思想

MVVM：model数据 > viewModel 数据视图监听层 > view视图 > vm

双向驱动：

数据驱动视图：m > vm > v，通过绑定
视图驱动数据：v >vm >m，通过监听

五、jsx

胡子语法{}：必须是js表达式；

number/string：原样输出，其他基本类型显示为空；
对象：数组纯数字可以，其他报错
行内样式：style={{fontSize:“12px”}}；驼峰命名；
类名：className=“box”
常用写法：

三元运算符（判断）；
Array.map()（循环）返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值；不会改变原始数组；

底层机制

第一步：babel-preset-react-app：将 JSX 语法编译成 React.createElement([元素标签名],[属性对象],[元素子节点]…);

<div>
  <h1 style={{color: 'red'}}>首页</h1>
</div>
----
React.createElement(
  "div",
  null,
   React.createElement(
    "h1",
    {
      style: {
        color: "red"
      }
    },
    "\u9996\u9875"
  )
);