「自己动手丰衣足食」搭建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。

相关文章

前端bug调试的方法技巧及常见错误

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》：本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误
阅读更多...
Vue中动态权限到按钮的完整实现方案详解

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表（routes）1.2 修改角色与路由权限表（role_routes）二、后端接口设计
阅读更多...
Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件：四、dhtmlx
阅读更多...
Vue ElementUI中Upload组件批量上传的实现代码

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl
阅读更多...
前端知识点之Javascript选择输入框confirm用法

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》：本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为：confirm 对话框会阻塞脚本的执行，直到用户作出选择。②
阅读更多...
如何使用CSS3实现波浪式图片墙

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》：本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙，通过设置图片的垂直偏移量，并使用动画使其周期性地改变位置，可以创建出动态且具有波浪效果的图片墙，同时，还强调了响应式设计的重要性，以确保图片墙在不同设备上都能良好显示，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
CSS3 最强二维布局系统之Grid 网格布局

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网
阅读更多...
HTML5中下拉框＜select＞标签的属性和样式详解

HTML5中下拉框＜select＞标签的属性和样式详解

《HTML5中下拉框＜select＞标签的属性和样式详解》在HTML5中，下拉框（select标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中，下拉框（<select>标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中
阅读更多...
前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

《前端CSS动态设置样式：:class、:style等技巧(推荐)》：本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法：对象语法和数组语法，通过对象语法，可以根据条件动态切换类名或样式；通过数组语法，可以同时绑定多个类名或样式，此外，还可以结合计算属性来生成复杂的类名或样式对象，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
禁止HTML页面滚动的操作方法

禁止HTML页面滚动的操作方法

《禁止HTML页面滚动的操作方法》：本文主要介绍了三种禁止HTML页面滚动的方法：通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性，每种方法都有其适用场景和优缺点，详细内容请阅读本文，希望能对你有所帮助... 在前端开发中，禁止htm
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2