react 部署 docker react环境搭建

转载

mob64ca13f5c557 2024-07-02 07:36:13

文章标签 react 部署 docker react javascript 环境配置环境搭建 文章分类 Docker 云计算

react入门指南（二）react环境搭建

1.react环境搭建
2.生成一个react基础项目
3.环境解析
4.环境配置
5.资源限制
6.第三方脚手架

1.react环境搭建

由于react基于Nodejs，所以安装前需要安装Node.js、npm、cnpm
当我们在官网下载并安装Node时，npm也自动安装好了，一路next后即可。安装好后键入node -v 以及npm -v 来测试是否安装成功（不需要自己手动配置系统环境变量）

因为国内使用npm很慢，我们可以使用淘宝的cnpm，同时设置镜像地址

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装成功后，可以键入cnpm -v检查是否安装成功

2.生成一个react基础项目

生成基础react项目可以借助官方脚手架
官方脚手架安装create-react-app

yarn global add create-react-app | npm install create-react-app	-g

创建 react项目

方法一                  create-react-app 目录
方法二（使用npx搭建)     npx create-react-app 目录
方法三（使用npm搭建）    npm init react-app 目录

解构出所有的配置文件

yarn eject

运行react项目

方法一（使用yarn） yarn start
方法二（使用npm）  npm start

打包react

方法一（使用yarn） yarn build
方法二（使用npm）  npm run build

调试项目的推荐给浏览器装一个插件react-dev-tools，方便调试

3.环境解析

react: 核心包，解析组件,识别jsx 演示
react-dom: 编译 -> 浏览器演示
react-scrpts: react的项目环境配置
manifest.json 生成一个网页的桌面快捷方式时，会以这个文件中的内容作为图标和文字的显示内容
registerServiceWorker.js支持离线访问，所以用起来和原生app的体验很接近,只有打包生成线上版本的react项目时，registerServiceWorker.js才会有效。服务器必须采用https协议
对Internet Explorer 9,10和11的支持需要polyfill。

4.环境配置

使用指令 npm run eject或者 yarn eject 解析出config与scripts配置的文件夹，便于修改
报git错误时:
git add . -> git commit -m ‘init’ -> yarn eject
报缺少babel 包: 安装一下

//修改端口
//修改script/start.js
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3001;

//去除eslint 警告
//config/webpack.config.js
//注释关于eslint的导入和rules规则
{
    //关于eslint警告的代码
          test: /\.(js|mjs|jsx|ts|tsx)$/,
          enforce: 'pre',
          use: [
            {
              options: {
                cache: true,
                formatter: require.resolve('react-dev-utils/eslintFormatter'),
                eslintPath: require.resolve('eslint'),
                resolvePluginsRelativeTo: __dirname,
                
              },
              loader: require.resolve('eslint-loader'),
            },
          ],
          include: paths.appSrc,
   }