老旧前端项目如何升级工程化的项目

因为历史的原因存在着大量的老旧前端项目，而在今天的开发环境中已经不再适应了，于是产生了升级到新的环境的需求。比如笔者当前的一个登录页面项目，就是以下面为技术栈的老旧项目。

  • 基于 jQuery
  • 包管理基于 require.js，甚至有的没有使用全局变量
  • 没有工程化，只使用 nginx 跑起页面

问题的产生

当前旧工程乃基于 Java 工程下的子前端项目，通过 Java Maven 打包压缩混淆 js/css，如下 Maven 插件的配置。

在这里插入图片描述
其实，笔者认为通过 Java 项目整合前端工程，也是一个不错的全栈选择，其特点是前后端虽然各自开发，但在同一工程下，打包部署亦是同时一起进行的，也就是打包部署没有前后端分离，前后端一起打包部署。这一点，是自从 Servlet 3.0 发布之后 JAR 包完全具备整合相关静态资源的能力（以前的 war 包就是一个网站，当然支持静态资源混合，JAR 包则不然）。而且通过 Maven 插件实现前端构建打包，也是一个不错的思路。但通过一系列实践得出的结论是，如果是小型的前端项目，修改不多，则此法甚秒，然则比较大型的前端项目，频繁修改的话，则此法弊端渐显。因为哪怕小小的前端修改，又要跟随后端项目发包部署，时间漫长且心里压力不舒坦。

于是在后来的升级改造中，我们希望可以部署也可以前端分离。

是否改造为 MVVM 架构

jQuery 无疑是以前主流的前端库，如果贸然升级到今天的 vue/react，貌似也没有很大的必要，MVVM 固然很好而且顺手，但升级需要考虑升级后的风险，如果业务代码不通过测试则麻烦很大，抵消了升级后带来的收益。况且，新的 node/npm 工程也完全支持 jQuery 引入，只是配置上稍有不同。总之，最后决定保留 jQuery 旧有的开发模式。

升级到 node/npm 环境

今天主流前端开发离不开 node/npm，于是升级第一件事就是切换此环境。构建工具，显然还是以 webpack 为主。

JS 迁移

Require.js 使用 AMD 语法，Webpack 同样支持 AMD 语法，能够动态分析项目中的依赖项，这是项目迁移成功的关键所在。只不过 Webpack 不是直接支持，而且需要稍微配置一下。

先看一下原项目中的`requirejs.config.js``：

requirejs.config({baseUrl: '/public/js',paths: {jquery: 'lib/jquery',jqueryUI: 'lib/jquery-ui',moment: 'lib/moment',qs: 'lib/qs',lodash: 'lib/lodash',selectize: 'lib/selectize',}
});require(['jquery', 'moment', 'modal/index'], function( $, moment, modal ){console.log($);
});

对 require.js 中的配置内容映射为 webpack 中的 alias，以解决路径解析问题。让 webpack 能够解析上面path中的地址。

开始配置·webpack.config.js·中的resolve.alias：

const path = require('path');
const resolve = filePath => path.resolve(process.cwd(), filePath);module.exports = {resolve: {alias: {jquery: resolve('lib/jquery'),jqueryUI: resolve('lib/jquery-ui'),moment: resolve('lib/moment'),qs: resolve('lib/qs'),lodash: resolve('lib/lodash'),selectize: resolve('lib/selectize'),}},
}

这样可以让 webpack 可以正确解析 require 的依赖。同时 require 的也可以引入不是 require 的包。

Inline js

内联 JS 是指在 html 中通过<script>置入的脚本。 这类脚本只能复制到新的一个包中，优先加载。

src js

src JS 是指在 html 中通过<scrip src=“xxx.js”>置入的脚本。 这类 JS 迁移到新的 JS 包，由 index.js/main.js 导入。

JS 压缩、混淆、source map

Webpack 构建下，打包成品是否压缩的取决于webpack.config.js的mode，设置为production即可压缩。

打开 devtool: 'source-map'生成 source map。

混淆需要 webpack-obfuscator 插件。

参考：

  • 用 webpack 替换 requirejs 打包
  • From Require.js to Webpack — Part 2 (The How)

引入 CSS

以前是<link rel="stylesheet" type="text/css" href="css/normalize.css" /> 方式引入 CSS 的，现在不用，改为在 js 包中：

import '../css/normalize.css';
import '../css/font_login/iconfont.css';

Inline CSS style 不作修改。

目前 CSS 和 js 打包一起，在浏览器打开 index.html，会发现样式在头部用<style></style>嵌入式引入，形成这样子的输出：
在这里插入图片描述

我们需要用link外部引入，减少 JS 文件的大小，使得样式分离。安装 MiniCssExtractPlugin：

npm install --save-dev mini-css-extract-plugin

修改 MiniCssExtractPlugin 配置：

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const webpack = require("webpack");
const CopyPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {/** ...省略其他配置... **/module: {rules: [{test: /\.css$/i,use: [MiniCssExtractPlugin.loader,'css-loader' ,],},],},plugins: [new MiniCssExtractPlugin({filename: "css/[name].css",chunkFilename: "css/[name].chunk.css",}),],
};

注意 MiniCssExtractPlugin 插件不能和 style-loader 共用，否则会报错。

图片迁移

Webpack5 新特性：资源模块 ，诸如引入图片的方式可以使用 webpack5 中的资源模块，而 url-loader, file-loader, raw-loader 三个库已经不再维护。

新方式：

module: {rules: [// 图片处理{test: /\.(png|jpg|svg|jpeg|gif)$/i,type: "asset/resource",},],
},

对于需要转化成 base64 的图片，可以使用type: asset/inline。

模板里面的图片

旧系统使用了经典的artTemplate模板，里面也包含了图片，如果没迁移还是原来的地址，当然报错：

在这里插入图片描述

正确做法是，把图片地址当作模板变量，这个图片地址由require()返回。我们逐一全局搜索图片文件名来替换。

在这里插入图片描述
在这里插入图片描述

其他资源

对于其他资源文件，有需要被 XHR（Ajax）请求的资源，也可以如法炮制，关键是让 Webpack 能够识别是可控的资源，然后require()。例如 jQ 的 i18n 资源。

module: {rules: [{// i18n 资源文件test: /\.(properties)$/i,type: "asset/resource",},],},

参考：《构建webpack5.x 知识体系：3、基础之图片、html、js、其他配置》、手把手带你学webpack（3）-- Webpack中加载图片及其他资源 、webpack5资源最佳加载方案。

JS 里面的图片

例如这种，在 JS 动态引入图片url('image/index/portal_bg.jpg')：

在这里插入图片描述
通过上面的 asset 配置之后，我们需要使用require()去引入图片地址。

在这里插入图片描述

HTML 里面的图片资源

HTML 里面的图片指的是<img src />引入的图片。虽然在 webpack5 中我们使用assets-module资源模块类型（asset module type）来替代比如 raw-loader 、url-loader、file-loader，但 HTML 图片不在assets-module负责之列。这是因为默认情况下，HTML 模板只是纯文本，Webpack 不能理解你想要复制在文本中引用的 asset。

这个时候需要再次增加一个 loader 配置来处理 HTML。添加 html-loader 依赖：

npm i html-loader -d

修改webpack.config.js：

    module: {rules: [{ test: /.html$/, loader: 'html-loader' } // 修正 HTML 加载 img src 图片],},

然后修改图片位置，注意是相对于 HTML 文件的位置：
在这里插入图片描述

关于 base64 图片

base64 后的图片会增加体积。

不要无脑将所有图片都使用 base64 编码处理，我们使用base64编码的主要目的还是为了减少http请求
对于那些数量多，但是体积小的图片文件，如果以文件的方式打包的话会产生多条 http请求，而如果把它们全都编码成 base64 存在 js 文件中，那 http 请求只会有一次。

图片压缩插件：image-webpack-loader。

开发环境服务器

为了能够有一个良好的开发体验，我们需要在代码更新时及时看到更新后的效果，这时候就需要webpack-dev-server的帮助了。

 devServer: {static: {directory: path.resolve(__dirname, '../dist'),},watchFiles: ['public/**/*'],compress: true,port: 8000,open: false, // 是否自动打开浏览器hot: true,},

hot: true表示开启 HMR 热更新，open则表示运行webpack serve命令后自动启动浏览器打开页面。

proxy 代理配置

旧有的方式是将页面 url 与接口 url 通过本地的 Nginx 配置在同一域（Domian）下面，Nginx 反代接口，接口访问接口。如今在 Webpack 的帮助下，一切都那么自然丝滑，——它整合了一个后台服务，相当于 Ng 角色，就是代理。

devServer: {proxy: [ // 配置代理（只在本地开发有效，上线无效）{context: ['/api'],target: 'http://xxxx:8100/aut',changeOrigin: true}]},

代理接口可能要多试几下，在 Postman 等工具中调通再回到开发环境中试试。

参考：1、2。

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

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

相关文章

【Conda 】Conda 配置文件详解：优化你的包管理与环境设置

【Conda 】Conda 配置文件详解：优化你的包管理与环境设置

目录 引言一、什么是 .condarc 文件&#xff1f;二、.condarc 文件的详细解析与优化2.1 SSL 验证2.2 设置 Conda 下载源2.3 设置环境和包存储路径2.4 代理服务器设置2.5 连接超时设置2.6 显示频道 URL2.7 包版本与构建选择2.8 环境依赖性管理2.9 禁用默认包版本2.10 Conda 配置…
阅读更多...
在国外，使用中国移动app办理停机保号

在国外，使用中国移动app办理停机保号

1.人在国内的时候&#xff0c;先使用手机下载中国移动app 以前网上营业厅是可以直接办理停机保号的&#xff0c;现在不可以了 2.人在国内的时候&#xff0c;确保自己的手机能够登录中国移动app 这个步骤保证回国前可以使用中国移动app复机 3.人在国内的时候&#xff0c;拨打…
阅读更多...
C# 解决【托管调试助手 “ContextSwitchDeadlock“:……】问题

C# 解决【托管调试助手 “ContextSwitchDeadlock“:……】问题

文章目录 一、遇到问题二、解决办法 一、遇到问题 托管调试助手 “ContextSwitchDeadlock”:“CLR 无法从 COM 上下文 0x56e81e70 转换为 COM 上下文 0x56e81d48&#xff0c;这种状态已持续 60 秒。拥有目标上下文/单元的线程很有可能执行的是非泵式等待或者在不发送 Windows …
阅读更多...
Vscode阅读C/C++ Code实用教程

Vscode阅读C/C++ Code实用教程

目录 1.必备插件2.创建工程3.重要的快捷键及使用 1.必备插件 C/C IntelliSense - 用于跳转GitLens — Git supercharged -用于查看git 提交记录Remote - SSH -用于连接linux服务器 2.创建工程 创建工程还是蛮重要的&#xff0c;虽然不创建同样可以看Code&#xff0c;创建工程…
阅读更多...
OGRE 3D----4. OGRE和QML共享opengl上下文

OGRE 3D----4. OGRE和QML共享opengl上下文

在现代图形应用开发中，OGRE（Object-Oriented Graphics Rendering Engine）和QML（Qt Modeling Language）都是非常流行的工具。OGRE提供了强大的3D渲染能力，而QML则用于构建灵活的用户界面。在某些应用场景中，我们需要在同一个应用程序中同时使用OGRE和QML，并且共享OpenGL…
阅读更多...
C语言进阶7:程序环境与预处理

C语言进阶7:程序环境与预处理

本章重点 程序的翻译环境程序的执行环境详解&#xff1a;C语言程序的编译 链接预定义符号介绍预处理指令 #define宏和函数的对比预处理操作符#和##的介绍命令定义预处理指令 #include预处理指令 #undef条件编译 1.程序的翻译环境和执行环境 在ANSIC的任何一种实现中&#x…
阅读更多...
model based和model free

model based和model free

model based和model free 1. **Model-Based 强化学习**特点&#xff1a;优势&#xff1a;劣势&#xff1a;示例&#xff1a; 2. **Model-Free 强化学习**特点&#xff1a;优势&#xff1a;劣势&#xff1a;示例&#xff1a; Model-Based 和 Model-Free 的对比小结 【GPT解答&am…
阅读更多...
.net的winfrom程序 窗体透明打开窗体时出现在屏幕右上角

.net的winfrom程序 窗体透明打开窗体时出现在屏幕右上角

窗体透明&#xff0c; 将Form的属性Opacity&#xff0c;由默认的100% 调整到 80%&#xff0c;这个数字越小越透明(尽量别低于50%&#xff0c;不信你试试看)&#xff01; 打开窗体时出现在屏幕右上角 //构造函数 public frmCalendarList() {InitializeComponent();//打开窗体&…
阅读更多...
【Java基础入门篇】三、面向对象和JVM底层分析（3）

【Java基础入门篇】三、面向对象和JVM底层分析（3）

Java基础入门篇 三、面向对象和JVM底层分析 3.5 抽象类/接口和外/内部类 &#xff08;1&#xff09;抽象类 **“抽象方法”**是使用abstract修饰的方法&#xff0c;没有方法体&#xff0c;只有声明&#xff0c;定义的是一种“规范”&#xff0c;就是告诉子类必须要给抽象方法…
阅读更多...
快速理解倒排索引在ElasticSearch中的作用

快速理解倒排索引在ElasticSearch中的作用

一.基础概念 定义&#xff1a; 倒排索引是一种数据结构&#xff0c;用来加速文本数据的搜索和检索&#xff0c;和传统的索引方式不同&#xff0c;倒排索引会被每个词汇项与包含该词汇项的文档关联起来&#xff0c;从而去实现快速的全文检索。 举例&#xff1a; 在传统的全文…
阅读更多...
计算二叉树节点个数（汇总）

计算二叉树节点个数（汇总）

二叉树结构类型定义 // 定义二叉树节点结构体 typedef int TElemType; // 假设数据类型为int&#xff0c;可根据需要修改 typedef struct BiTNode {TElemType data;struct BiTNode* lchild, * rchild; } BiTNode, * BiTree;计算二叉树总节点个数 思想&#xff1a; 递归求解法…
阅读更多...
AI开发 - GPT之魂 用Python 演示chatGPT的自注意力机制 - 机器学习

AI开发 - GPT之魂 用Python 演示chatGPT的自注意力机制 - 机器学习

自注意力机制&#xff08;Self-Attention&#xff09;就是让模型在处理每个词时&#xff0c;学会“关注重点”&#xff0c;而不是平均地对每个词一视同仁。这种机制让 GPT 能更聪明地理解句子的上下文和语义之间的关系。 自注意力机制是 GPT 的核心&#xff0c;它帮助模型在理解…
阅读更多...
将自定义 AWS S3 快照存储库连接到 Elastic Cloud

将自定义 AWS S3 快照存储库连接到 Elastic Cloud

作者&#xff1a;来自 Elastic Annie Hansen, Stef Nestor 在本博客中&#xff0c;我们将介绍如何通过 Elasticsearch 的快照将我们已提交的集群数据备份到 AWS S3 存储桶中。在 Elastic Cloud&#xff08;企业版&#xff09;中&#xff0c;Elastic 在其 found-snapshots 存储…
阅读更多...
linux下Qt程序部署教程

linux下Qt程序部署教程

文章目录 [toc]1、概述2、静态编译安装Qt1.1 安装依赖1.2 静态编译1.3 报错1.4 添加环境变量1.5 下载安装QtCreator 3、配置linuxdeployqt环境1.1 在线安装依赖1.2 使用linuxdeployqt提供的程序1.3 编译安装linuxdeployqt 4、使用linuxdeployqt打包依赖1.1 linuxdeployqt使用选…
阅读更多...
【QT】控件8

【QT】控件8

1.QDial 通过调节旋钮位置来控制窗口的不透明度&#xff1a; void Widget::on_dial_valueChanged(int value) {qDebug()<<value;this->setWindowOpacity((double)value/100); }效果演示&#xff1a; 2.Date/Time Edit 计算两个日期的差值 ui界面设计 计算按钮按下…
阅读更多...
CGAL CGAL::Polygon_mesh_processing::self_intersections解析

CGAL CGAL::Polygon_mesh_processing::self_intersections解析

CGAL::Polygon_mesh_processing::self_intersections 是用于检测多边形网格&#xff08;Polygon Mesh&#xff09;中的自相交的函数。自相交是指网格中的某些面&#xff08;例如三角形&#xff09;与同一网格中的其他面交叉的情况。这种情况通常是不期望的&#xff0c;因为它会…
阅读更多...
k8s运行运行pod报错超出文件描述符表限制

k8s运行运行pod报错超出文件描述符表限制

1.问题描述 运行pod超过文件描述符表 unable to allocate file descriptor table - out of memory/opt/COMMAND.sh: line 9: 2.查看设备的文件描述符限制 操作前一定要先查询这个值&#xff0c;2097152这个值即为我们可设置的最大值&#xff0c;超过这个值后将无法登录&am…
阅读更多...
[巅峰极客 2021]签到

[巅峰极客 2021]签到

[巅峰极客 2021]签到 给了我们好多表情&#xff0c;真的是一脸懵逼 注意给我们的关键词 GAME 现在还不知道是什么意思我们去试着解开一下 用这个emoji表情解密器&#xff0c;这里我找了好久才找到一个 emoji-aes 这里的Key值就是GAME 运行后出现flag NSSCTF{10ve_4nd_Peace…
阅读更多...
【ETCD】etcd中配置参数详解

【ETCD】etcd中配置参数详解

详细记录etcd服务启动的各个参数 1、etcd成员相关的配置项 --name default 为该成员指定一个易读的名称。--data-dir ${name}.etcd 数据存储目录的路径。--wal-dir 用于存放专用WAL&#xff08;Write-Ahead Log&#xff09;的目录路径。--snapshot-count 100000 触发快照…
阅读更多...
10、流程控制语句

10、流程控制语句

1、流程控制语句介绍 流程控制语句可以控制程序的执行过程&#xff0c;流程控制语句可以分为4种结构&#xff1a; a、顺序结构 b、选择结构 c、循环结构 d、跳转结构 2、顺序结构 程序是从main的第一句执行到最后一句 上一句执行完后才能执行下一句 顺序结构没有语句&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023