前端工程启动工具

一些思考

在公司项目中,需要启一个新的前端工程(一个基于Webpack的React工程)。因为同一个项目中有其他的前端工程,我们最开始想的是参考另外一个工程的配置重启一个新的工程,但是又因为原来的工程用的库版本都比较老,而我们这个新的工程又需要安装最新的依赖,所以就只能从头开始启一个工程了。

但是这个过程也是比较曲折的,经历了几次推翻重启。

首先,第一版我们为了避免各种依赖之间的版本冲突,就将原来工程中的packages.json文件中内容复制到新工程里,然后再将我们需要的Webpack配置以及其他的基础配置配好后,启动测试。测试通过后,我们尝试将我们想要升级的依赖升级到我们想要的版本,比如React18和Webpack5。在这个期间,也会出现一些需要修改的配置文件,比如旧版本的写法不适用于新版本,这时我们就需要用新版本的写法覆盖旧版本的内容。解决完这部分问题后,我们已确定我们的工程可以正确启动了,并且可以达到我们想要的启动后的结果,所以我们就认为这部分工作我们已经做完了。但是为了确保我们的思路是否正确,我们将产出的结果拿去给公司更senior的同事看了后,他提出了一些建设性的意见,比如:

  1. 由于我们的做法是将旧工程的配置文件都复制到新的工程里面来,所以里面会有很多我们暂时用不到的依赖、配置,那这时候就会有很多冗余代码,并且会降低构建速度,还会造成配置混乱,增加项目的复杂度和维护成本,也会存在一些潜在的错误或者问题;
  2. 对于我们启工程且后续需要在这个工程上编码的同学来说,一些没有用的配置也会给我们带来压力,比如会增加阅读和理解代码的成本,也会让我们的思路变得不清晰,不利于学习。

所以,基于此意见,我们选择重新启一个工程。

然后,第二版我们根据上一次的经验,选择用到什么再加什么配置,而不是一股脑的把所有需要用到的配置都加上去,最后再解决冲突。这样的好处就是能让我们的思路变得清晰,并且让我们能更好地理解这个工程,在其他人需要了解的时候我们也可以能清晰地给讲出某一个配置的由来及作用是什么。这个时候我们的步骤是:

  1. 先使用create-react-app脚手架搭建一个基础的React工程,测试运行通过后进行下一步。
  2. 在其中增加Webpack的相关配置,比如增加Webpack.config.common.js文件,编写如下文提到的Webpack四个核心概念的内容(entry、output、loader、plugins),然后再补充dev环境的Webpack配置Webpack.config.dev.js文件,修改script运行脚本为webpack serve --config config/webpack.config.dev.js --progress。然后进行测试运行。

(参考本片文章:从零开始创建react+webpack项目)

在这个过程期间,我们有遇到一些问题,也去求助了senior同事,他们告诉我们说,我们的方法也可以用,但是在一般正式的项目上如果需要重写使用create-react-app脚手架搭建的工程中的Webpack相关配置时,会采用raect-app-rewired的方式创建,react-scripts 提供的 config-overrides.js 文件可以修改 Webpack 配置。config-overrides.js 文件通过导出一个函数来修改 CRA 的默认配置。这个函数接受一个 config 参数,可以在其中修改 Webpack 配置。例如,可以添加、修改或删除 Loaders、Plugins、Optimizations 等等。下面是一个简单的例子:

上述示例在 Webpack 配置中添加了一个处理 .txt 文件的 Loader,并将输出目录更改为 custom-build。

除此之外,也可以使用执行eject脚本的方式暴露出Webpack配置文件,然后进行自定义设置。

  1. 执行以下命令来暴露Webpack配置文件:npm run eject
  2. 执行上述命令后,Create React App将会生成一个 config 文件夹和相应的配置文件,包括 webpack.config.js。可以在这些配置文件中进行修改和定制。
  3. 然后可以根据需要修改Webpack配置,例如添加额外的loader、plugins、自定义路径等。
  4. 修改配置后,运行 npm start启动开发服务器。

以上的工作就算告一段落了。我们在总结的过程中,从另外一位同事那里了解到,一般比较大的项目并且需要的配置比较多的项目,比如测试,Webpack,antDesign、routes等,也会采用umi脚手架启动工程。umi是阿里推出的一个企业级的React应用开发框架,它提供了一系列工具和约定,帮助开发者快速构建可扩展、高效和易维护的React应用。

umi脚手架具有以下主要特点和功能:

  1. 路由管理:UMI内置了强大的路由系统,支持配置式路由和约定式路由。通过配置文件或目录结构自动生成路由,支持嵌套路由、动态路由、权限控制等功能。
  2. 插件机制:UMI提供了丰富的插件机制,可以通过引入插件来扩展和定制项目功能。UMI插件可以处理路由、构建、数据模拟、国际化等方面的需求,且插件具有良好的生态和社区支持。
  3. 开发模式支持:UMI支持多种开发模式,包括单页应用(SPA)、服务器渲染(SSR)、静态网站生成(SSG)等。可以根据项目需求选择合适的开发模式,并进行相应的配置。
  4. 状态管理:UMI天然支持多种状态管理方案,包括React Context、Redux、Mobx等。可以根据项目需求选择合适的状态管理方案。
  5. 构建工具:UMI集成了Webpack和Babel等构建工具,使得项目的构建和打包过程更加简化。可以通过配置文件对构建过程进行定制,并享受热更新、代码分割、按需加载等优秀的构建特性。
  6. 测试和部署:UMI提供了一系列测试工具和部署方案,可以帮助编写和运行单元测试、集成测试,并方便地将应用程序部署到各种环境中。

但与此同时,umi也存在一定的缺点:

  1. 配置复杂性:虽然umi提供了丰富的配置选项,但也会导致配置复杂性增加。对于初学者或简单项目来说,会过于复杂且“重”,需要手动删除不需要的依赖及配置;
  2. 依赖关系:umi依赖于一些其他的工具或库,例如Webpack、babel、React等。这些依赖关系可能会导致一些版本兼容性或依赖冲突的问题,需要手动管理和解决。

所以,在工作中,可以根据项目的需要选择脚手架去创建工程。这个部分还需要再了解,跟着有经验的同事深入学习。

上述工作完成后,我也整理了一些关于Webapck的相关内容,整理一下思路,以便在以后的工作中用到。

为什么需要打包工具
开发时,我们会使用框架(React、Vue),ES6模块化语法,Less/Sass等css预处理器等语法 进行开发。
这样的代码要想在浏览器运行必须经过编译成浏览器能识别的JS、css等语法才能运行。所以打包工具就是帮我们完成这一步骤。除此之外,打包工具还能压缩代码、做兼容性处理、提升代码性能等。
Webpack的核心概念
在弄清楚Webpack之前需要了解清楚以下四个核心概念。
entry
在Webpack中,entry指定应用程序的入口点(entry point)。它是Webpack构建过程的起点,表示Webpack应该从哪个文件开始构建应用程序的依赖图。
在Webpack配置文件中,可以通过entry属性来指定一个或多个入口点。每个入口点对应一个文件路径,可以是单个JavaScript文件、CSS文件、HTML文件或其它类型的文件。Webpack会根据这些入口点开始分析和解析依赖关系,构建整个应用程序的依赖图。
例如:

module.exports = {entry: './src/main.js',
};

在上面的例子中,entry属性指定了.src/main/js作为应用程序的入口点。Webpack将从这份文件开始构建应用程序,并根据它的依赖关系进一步解析其他模块和资源。

output

在Webpack中,output指的是构建输出的配置选项。定义了Webpack打包后的文件输出位置和文件名等相关信息。如下是常用的配置选项:

  • path:指定输出文件的目标路径。例如path: path.resolve(__dirname, 'dist),将输出文件保存在项目根目录下的dist文件夹中。
  • filename:指定输出文件的名称。默认为bundle.js,也可以使用占位符和变量来生成动态的文件名。例如,filename:'bundle.js'将生成一个名为bundle.js的输出文件。
  • publicPath:指定输出文件在被引用时的公共路径。用于配置在浏览器中加载静态资源的路径。例如,publicPath: '/assets/'会将输出文件的路径前缀设置为/assets/
  • chunkFilename: 配置非入口点的代码块(chunk)的文件名。这些代码块通常是按需加载时生成的。例如,chunkFilename: '[name].js'将生成基于代码块名称的文件名。
module.exports = {output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js',publicPath: '/assets/',},
};
loader

在Webpack中,loader指的是用于处理特定类型的文件的加载器。Webpack在打包过程中会遇到不同类型的文件,例如JavaScript文件、CSS文件、图片、字体文件等,而加载器会告诉Webpack如何处理这些文件。

Webpack的加载器通过转换文件内容或执行一些额外的任务来对文件进行处理。加载器可以将文件转换为JavaScript模块,将Sass文件转换为CSS,对图片进行压缩和优化等等。加载器可以链式调用,允许按顺序应用一系列转化和处理操作。

加载器通常在Webpack配置文件的module.rules属性中定义。每个加载器规则由两部分组成:

  1. test:用于匹配文件路径的正则表达式,指定了应该由该加载器进行处理的文件类型。
  2. use:指定使用的加载器,可以是单个加载器或多个加载器组成的数组。加载器可以是内置的Webpack加载器,也可以是通过npm安装的第三方加载器。

例如:

module.exports = {// 其他配置项...module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader'],},{test: /\.(png|jpg|gif)$/,use: ['file-loader'],},],},
};

上述示例中,定义了两个加载器规则:

  1. 对于以.css结尾的文件,使用style-loader和css-loader加载器进行处理。css-loader用于解析CSS文件,而style-loader用于将解析后的CSS添加到页面中。
  2. 对于以.png.jpg.gif结尾的文件,使用file-loader加载器进行处理。file-loader用于处理图片文件,将它们复制到输出目录并返回最终的URL。
plugins

在Webpack中,plugins指的是用于执行更广泛范围任务饿自定义构建流程的插件。插件可以用于从打包过程中的各个阶段添加额外的功能和扩展Webpack的功能。

Webpack的插件可以处理各种任务,包括但不限于:

  • 优化输出文件,例如压缩、混淆和代码分割;
  • 处理非JavaScript文件,例如将CSS提取为单独的文件、压缩图像等;
  • 注入全局变量或环境变量;
  • 生成HTML文件,自动引入打包后的资源;
  • 清理输出目录,确保每次构建都是干净的;
  • 收集统计信息,例如构建报告、Bundle分析等;
  • 在构建过程中执行自定义逻辑和任务。

要使用插件,需要在Webpack配置文件中的plugins属性中实例化和配置它们。插件可以是内置的Webpack插件,也可以是通过npm安装的第三方插件。

例如:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {// 其他配置项...plugins: [new HtmlWebpackPlugin({template: './src/index.html',}),new CleanWebpackPlugin(),],
};

在上述示例中,使用到了两个插件:

  1. HtmlWebpackPlugin:用于生成HTML文件并自动将打包后的资源引入。通过指定template选项,可以指定基于哪个模版文件生成的HTML文件;
  2. CleanWebackPlugin:用于清理输出目录。每次构建之前,它会自动清除输出目录,确保每次构建都是干净的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/56571.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件设计师:软件工程

文章目录 一、开发模型(1)瀑布模型(需求明确)(2)增量模型(快速构建)(3)演化模型(迭代模型)(3.1)原型模型&…

自学C语言——函数(全)

接上一篇:自学C语言——数组(二) 1.函数的概念 C语言中:函数子程序 C语言中的函数就是一个完成某项特定的任务的一小段代码。 2.库函数 标准库和头文件 C语言标准中规定了C语言的语法规则,C语言不提供库函数&am…

Ubuntu 22.04上安装Miniconda

在Ubuntu 22.04上安装Miniconda,可以按照以下步骤进行: 步骤1:更新系统 首先,更新您的系统软件包: sudo apt update sudo apt upgrade -y步骤2:下载Miniconda安装脚本 访问Miniconda的官方网站或使用以下…

IAR全面支持旗芯微车规级MCU,打造智能安全的未来汽车

中国上海,2024年10月18日 — 在全球汽车电子快速发展的今天,IAR与苏州旗芯微半导体有限公司(以下简称“旗芯微”)联合宣布了一项激动人心的合作——IAR Embedded Workbench for Arm 9.60.2版本现已全面支持旗芯微车规级MCU&#x…

【Docker】docker | 部署nginx

一、概述 记录下nginx的部署流程;将conf配置文件映射到宿主机 前提依赖:自行准备nginx的镜像包 二、步骤 1、运行、无映射 docker run --name nginx -p 80:80 -d nginx:1.18.0-alpine 80:80,前面是宿主机端口;如果冲…

IPsec简单介绍

VPN相关介绍 VPN:虚拟私有网络 例如:像这种不加密的 PPTPL2TP ------- 一般用在windows server 服务端(但是大多数企业不用这个) 假如总公司内部的PC1要去访问分公司内部的PC2(一般用在公司服务器有内网的服务&#…

vue需要清除定时器和延时器吗

在更新组件时清除定时器: 如果你的定时器是在组件的更新过程中创建的,你可能需要在更新前清除它,以免重复创建。你可以在组件的beforeUpdate钩子中清除定时器。 例如,在Vue2中,你可以这样清除定时器: exp…

【知识科普】今天聊聊前端打包工具webpack

文章目录 webpack概述1. 入口(Entry)2. 输出(Output)3. Loader4. 插件(Plugins)5. 模式(Mode)6. 浏览器兼容性(Browser Compatibility)7. 环境(En…

Oracle 使用位图索引 Cost降低200倍! 探讨位图索引的利与弊

一.简介 位图索引(Bitmap Index) 是 Oracle 数据库中一种特殊类型的索引,适用于低基数(Low Cardinality)列,即那些列中可选值相对较少的情况下使用。它与常规的 B-tree 索引不同,位图索引通过位…

Vue组件学习 | 二、Vuex组件

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。以下是 Vuex 的基本用法 Vuex 基本用法 安装 Vuex 首先,你需要安装 Vuex。如果你使用的是 n…

003:无人机概述

摘要:本文介绍无人机的定义和分类、无人机系统定义、民用无人机驾驶员分类和应用领域。 一、无人机的定义和分类 1.无人机定义 无人机是一种能够在无人驾驶的条件下完成复杂空中飞行任务和各种负载任务的飞行器,可以被视为“空中机器人”。它利用先进的…

(48)MATLAB使用firls函数设计均衡器

文章目录 前言一、频域均衡器的设计二、MATLAB源代码1.firls函数与freqz函数2.MATLAB仿真源代码3.代码说明 三、仿真结果画图 前言 利用MATLAB的firls函数,根据所要求的频率向量和频响幅度向量,设计出所需的均衡器,使得包括滤波器在内的系统…

【python爬虫】python的requests模块使用`Session`对象可以保持会话状态,自动处理Cookie等信息

1. 请求发送 网络爬虫的第一步是发送HTTP请求。Python中的requests库是发送请求的首选工具,它简单易用且功能强大。 使用requests库 import requestssession requests.Session() session.headers {"User-Agent": "Mozilla/5.0",# 其他请求…

qt 构建、执行qmake、运行、重新构建、清除

qt右键功能有 构建、执行qmake、运行、重新构建、清除,下面简单介绍一下各个模块的作用。 1. 执行qmake qmake是一个工具, 它根据pro文件生成makefile文件,而makefile文件中则定义编译与连接的规则。pro文件中定义了头文件,源文件…

C语言_通讯录_进阶

引言:在之前的项目中,我们所用的通讯录是静态版本,也就是常规的固定数组大小,但仔细思考,在现实的复杂环境中,是很难做到这样死板,所以在学习过动态内存的章节后,我们将通讯录重新修…

Spring Cache Caffeine 高性能缓存库

​ Caffeine 背景 Caffeine是一个高性能的Java缓存库,它基于Guava Cache进行了增强,提供了更加出色的缓存体验。Caffeine的主要特点包括: 高性能:Caffeine使用了Java 8最新的StampedLock乐观锁技术,极大地提高了缓存…

三国杀钓鱼自动化

三国杀钓鱼脚本 前言 本来是想做必杀的,但是后来测试了大约400钓发现纯靠连点没有漏掉的鱼,所以必杀功能就舍弃了。 我pyinstaller打包后运行.exe居然黑屏了???可能是多进程报错处理没写好,反正还是用vsc…

笔试第五行

static作用: 1.函数体内,一个被声明为静态的变量在这一函数被调用时值维持不变。 2.函数体外,模块内,一个被声明为静态的变量可以被模块内函数访问,但不能模块外函数访问,这是一个本地的全局变量。 3.模…

k8s部署使用有状态服务statefulset部署eureka集群,需登录认证

一、构建eureka集群镜像 1、编写dockerfile文件,此处基础镜像为arm版本,eureka目录中文件内容:application-dev.yml、Dockerfile、eureka-server-1.0-SNAPSHOT.jar(添加登录认证模块,文章最后附上下载连接) FROM mdsol/java8-j…

Go使用exec.Command() 执行脚本时出现:file or directory not found

使用 Go 提供的 exec.Command() 执行脚本时出现了未找到脚本的 bug,三个排查思路 : exec.Command(execName, args…) 脚本名字不允许相对路径 exec.Command(execName, args…) execName 只能有脚本名,不允许出现参数 如果你是使用 Windows …