「自己动手丰衣足食」搭建React脚手架

2023-12-07 01:30
文章标签 javascript react 搭建 frontend 动手 脚手架 丰衣足食

本文主要是介绍「自己动手丰衣足食」搭建React脚手架，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

React 脚手架

前言

刚开始学习React的朋友基本都是从Facebook官方提供 create-react-app 脚手架开始，别人的脚手架开箱即用固然爽，但是有的时候想要进行一些功能的拓展（集成less等) 就需要去百度谷歌。因为脚手架把整个项目的编译构建过程高度集成了，我们想通过脚手架生成的代码学习项目工程化，刚开始肯定是大难度的。

伟人曾道：自己动手，丰衣足食。为了更深层次的去学习react，去尝试理解react项目编译构建过程，自己动手搭建最基础的一个react脚手架也许是个不错的学习方法。

「追根溯源」

首先我们必须知道，我们的工程不管多么高大上，到最后打包出来的文件无非html，css，js以及其他浏览器能够认识的文件。

React 推出自己一套新语法 JSX,正常的js文件是不允许出现 xml 标签的，但是JSX赋予了js+xml混合的能力。浏览器是不认识jsx文件的，我们为了最终能把jsx转化成js，需要借助webpack+babel工具来配合处理项目文件。对于webpack、babel详细的功能学习后面找机会单独开篇。

所以开篇的目的出发，我们需要将项目中的 jsx，tsx，less，sass，png等方便开发者操作但是浏览器不认识的文件进行编译整合，从而得到能够在浏览器或者node环境运行的文件，接下来看看到底需要怎么做。

「React 一切的开端」

  1. 初始化项目
// 新建一个空文件夹
mkdir levenx-init && cd levenx-init
// 生成package.json
npm init -y
  1. 安装webpack
npm install webpack webpack-cli webpack-dev-server -D 

或者你更习惯yarn管理包

yarn add webpack webpack-cli webpack-dev-server -D

虽然webpack推崇「约定大于配置」，即不需要配置任何信息就可以打包项目。但是为了更好的管理编译过程，我们还是提供下自己的配置文件，从而让webpack更合我们的心意。

创建 webpack.config.js 配置文件

//提供一个最简单的webpack配置，并且尽可能的加上备注

const webpack = require('webpack');
const path = require('path');
const config = {
  //打包模式：development || production 开发模式和生产模式
    mode: 'development',
    //基础阶段可以不加；配置不同的 source map 格式来增强调试过程
    devtool: "cheap-module-eval-source-map",
    //webpack 打包入口
    entry:path.resolve(__dirname, './src/index.js'), 
    //webpack 打包产物输出属性
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name]-[hash].js',
    },
    //webpack 模块属性
    module: {
    },
    //开发模式配置本地开发服务器
    devServer: {
        port: 3000,
        host:'0.0.0.0',
        contentBase: path.join(__dirname, 'dist'),
        clientLogLevel: 'silent',
        historyApiFallback: true //处理browserRouter 转发路由404问题
    },
    // webpack 插件配置，拓展 webpack 的超能力
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};
module.exports = config;

备注

从配置文件可以很明显的看出，webpack配置文件最终需要返回一个config对象，其他的各种逻辑都可以随意的抽象。

  1. 安装React核心包
yarn add react react-dom

玩过React的朋友应该对**「react」「react-dom」**这两个包有很深印象。

关于这两个核心包有机会也单独开篇。

  1. 安装babel

开发者之所以能很愉快的使用jsx模式来编写代码，就是利用了babel提供的功能。

yarn add @babel/core  @babel/plugin-transform-runtime @babel/runtime  -D
yarn add @babel/preset-env @babel/preset-react -D
yarn add babel-loader -D

//处理装饰器decorators 如果你使用redux connect这类高阶组件时喜欢注解方式，需要安装
yarn add @babel/plugin-proposal-decorators -D

创建bable配置文件 .babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime"
        ],
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ]
    ]
}

备注

Babel 配置信息可以通过项目跟路径的.babelrc文件来配置，也可以直接在webpack中model.rule中配置。单独抽出配置文件会更加清晰，推荐使用.babelrc。

.babelrc 需要严格遵守json格式编辑。

额外知识点

presets与plugins的区别？

Babel是代码转换器，比如将ES6转成ES5，或者将JSX转成JS等。借助Babel，开发者可以提前用上新的JS特性，实现Babel代码转换功能的核心，就是Babel插件（plugin）。

Babel插件一般尽可能拆成小的力度，开发者可以按需引进。比如对ES6转ES5的功能，Babel官方拆成了20+个插件。这么做的好处是既提高了性能，也提高了扩展性。缺点也显而易见，但很多时候，为了拥有某种功能需要逐个插件引入，既费力，又容易出错。

此时babel提供了 presets 的概念，。简单的说 Babel Preset可以看作是Babel Plugin的集合。

webpack配置使用babel-loader

//提供一个最简单的webpack配置，并且尽可能的加上备注

const webpack = require('webpack');
const path = require('path');
const config = {
  ...
    //webpack 模块属性
    module: {
    rules: [
        // 使用 bable 处理jsx文件，webpack处理项目文件时，碰到jsx文件，就使用babel进行代码转化
            {
                test: /\.jsx?$/,
                exclude: /node_moudles/,
                use: [
                    { loader: 'babel-loader' }
                ]
            }
        ]
    },
    ....
};
module.exports = config;

现在 关于webpack + babel 的最基础的满足react项目的配置已经完成了。

接下来 就是见证成果的时候了。

  1. 启动dev服务器
//方案1： 终端执行
npx webpack-dev-server --config webpack.dev.config.js  --progress --colors --hot --inline --open

//方案2： npm-script模块
"scripts": {
    "start": "webpack-dev-server --config webpack.dev.config.js  --progress --colors --hot --inline --open"
}

npm run start

等等，停下脚步，写个最简单的 React dome,看看效果。

  • 代码
乐闻世界react代码
乐闻世界react代码

  • 效果

    乐闻世界效果图
    乐闻世界效果图

可见已经可以正常的编写react代码，但是想开心的写代码还需要新增一些配置。

「我想要更多的能力」

常用webpack插件配置
// 处理html,将打包好的js路径引入到html中等等
yarn add html-webpack-plugin  -D
// 清空历史打包产物
yarn add clean-webpack-plugin -D

//webpack.js中配置插件
const HtmlwebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

...

plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new CleanWebpackPlugin(),
        new HtmlwebpackPlugin({
            title: 'hello levenx',
            template: './public/index.html'
        })
    ]
样式处理
yarn add style-loader css-loader less-loader less -D

Webpack.config.js 配置loader

module: {
        rules: [
            {
                test: /\.(le|c)ss$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'less-loader' }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_moudles/,
                use: [
                    { loader: 'babel-loader' }
                ]
            }
        ]
    },

备注

配置完样式的loader,我们就是开心的写样式了。

「独乐乐不如众乐乐」

既然都能在本地运行项目了，那么我们何不想办法把你的杰作丢到公网上，让别人都能欣赏呢。

这个时候可能有人疑惑，既然都能在本地运行了，同样的把代码丢到远程服务器上，然后npm run start 不就行了吗。虽然这种方式是可以把项目启动起来，但是是利用 webpack-dev-server 开发服务器提供的能力。开发服务器是很耗机器性能的，因为存在各种热更新，这都是通过长链接实现的。小流量来访问你的网站可能还能扛得住，但是一旦流量大了，你的网站会变得卡顿，甚至宕机。

那我们该怎么办呢？接下来提供一个简单的方案。

生产资源打包配置
// webpack.prod.config.js
const config = {
  //模式设置成production，打包产物会剔除不必要的代码
  mode: 'production',
    entry: [
        './src/index.js'
    ],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name]-[hash].js',
        //如果你想利用CDN加速静态资源加载，这个地方需要配置CDN地址
        publicPath: 'http://static.levenx.com/'
    },
   ...
};
module.exports = config;
执行打包命令
// npm-script
"scripts": {
    "build": "webpack --mode=production --config webpack.prod.config.js"
  }
  
npm run build

备注

根目录下的build文件夹就是打包出来的文件。

把打包出来的所有文件丢到你的静态资源服务器上即可。Nginx部署静态资源的方法，供大家参考。https://blog.csdn.net/m0_37890289/article/details/82466239

image-20201029173610677

github地址：https://github.com/levenx/levenx-react-cli

完整webpack.config.js 代码

//完整的webpack.config.js

const webpack = require('webpack');
const path = require('path');
const config = {
  //打包模式：development || production 开发模式和生产模式
    mode: 'development',
    //基础阶段可以不加；配置不同的 source map 格式来增强调试过程
    devtool: "cheap-module-eval-source-map",
    //webpack 打包入口
    entry:path.resolve(__dirname, './src/index.js'), 
    //webpack 打包产物输出属性
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name]-[hash].js',
        //如果你想利用CDN加速静态资源加载，这个地方需要配置CDN地址
        publicPath: 'http://static.levenx.com/'
    },
    //webpack 模块属性
    module: {
    rules: [
        // 使用 bable 处理jsx文件，webpack处理项目文件时，碰到jsx文件，就使用babel进行代码转化
            {
                test: /\.jsx?$/,
                exclude: /node_moudles/,
                use: [
                    { loader: 'babel-loader' }
                ]
            },
            // less,css 文件处理
            {
                test: /\.(le|c)ss$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'less-loader' }
                ]
            }
        ],
      resolve: {
        // 设置别名
        alias: {
            '@': path.resolve(__dirname, 'src')// 这样配置后 @ 可以指向 src 目录
        }
    },
    },
    //开发模式配置本地开发服务器
    devServer: {
        port: 3000,
        host:'0.0.0.0',
        contentBase: path.join(__dirname, 'dist'),
        clientLogLevel: 'silent',
        historyApiFallback: true //处理browserRouter 转发路由404问题
    },
    // webpack 插件配置，拓展 webpack 的超能力
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new CleanWebpackPlugin(),
        new HtmlwebpackPlugin({
            title: '乐闻世界',
            template: './public/index.html'
        })
    ]
};
module.exports = config;

这篇关于「自己动手丰衣足食」搭建React脚手架的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/464046。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
搭建Kafka+zookeeper集群调度

搭建Kafka+zookeeper集群调度

前言 硬件环境 172.18.0.5        kafkazk1        Kafka+zookeeper                Kafka Broker集群 172.18.0.6        kafkazk2        Kafka+zookeeper                Kafka Broker集群 172.18.0.7        kafkazk3
阅读更多...
【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站，手机流量可以访问IPV6网络的服务，为什么不在电脑搭建Home Assistant（hass），来控制你的设备呢？@智能家居 @万物互联
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
pico2 开发环境搭建-基于ubuntu

pico2 开发环境搭建-基于ubuntu

pico2 开发环境搭建-基于ubuntu 安装编译工具链下载sdk 和example编译example 安装编译工具链 sudo apt install cmake gcc-arm-none-eabi libnewlib-arm-none-eabi libstdc++-arm-none-eabi-newlib 注意cmake的版本，需要在3.17 以上 下载sdk 和ex
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2