前端系列-3 前端打包工具和插件介绍(npm+babel+webpack)

2024-04-28 09:12

本文主要是介绍前端系列-3 前端打包工具和插件介绍(npm+babel+webpack),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

背景

最近接触了两个前端项目,分别是vue2和vue3,感觉有点生疏。作为后端开发,前端知识容易遗忘,想着将之前的学习笔记整理成电子版发出来,以便后续简单复习即可快速恢复。前端系基于这个目的创建,将用于收集前端技术文章。

1.npm和nodejs

1.1 nodejs

说明:nodejs是一个基于ChromeV8引擎的JS运行环境,使用了事件驱动、非阻塞式I/O模型、优化的JS编译技术的JS运行时环境;基于此,JS可用于开发服务端语言。NodeJS与V8引擎的最新版本是保持同步, 因此支持ES6语法。

安装:https://nodejs.cn/download/

node -v 查看是否安装成功

1.2 npm

说明: Node Package Manager, NodeJs默认的包管理工具,相当于Python的pip,Java的maven.

安装:在安装NodeJs时会自动安装

npm -v 查看是否安装成功

1.2.1 语法:

(1) npm config get/set
用于获取和设置全局配置,可配置项包括:prefix, cache, registry, proxy。
cache和prefix分别是npm的缓存和 全局安装包的路径;
proxy代理地址(公司内部一般会进行代理设置)
register 设置包镜像地址,可设置为国内的镜像地址:

npm config set registry https://registry.npm.taobao.org/

(2) npm init
用于项目初始化; 在当前目录生成一个package.json文件

(3) npm install/uninstall
npm install/uninstall 语句用于安装和卸载安装包

# -g表示全局安装, -D表示开发环境安装
npm install -g nodemon

安装完成后会在当前项目/全局路径下生产一个node_modules文件夹,用于存放安装包.

(3) npm list
查看已经安装的包

# -g表示全局安装
npm list -g

(4) npm的发布
需要注册npm账号,使用npm login命令登录,使用npm publish发布

1.2.2 配置文件:

.npmrc作为npm的配置文件(键值对集合),在指定npm命令时会读取.npmrc文件,存在相同的键时,优先级顺序为:项目根目录下的.npmrc文件>用户主目录下的.npmrc文件>npm内置的默认配置。上述npm config set语句的执行结果会同步到.npmrc文件文件中,因此机器重启不会丢失修改的配置。

1.2.3 package.json文件:

(1) 坐标属性(必选)
name和version用于全局唯一标识安装包;

(2) 描述类属性:
description, keywords ,contributors,bugs,author等描述类属性,可选;

(3) 依赖配置:
常使用的依赖包括dependencies和devDependencies,其中dependencies表示生产环境中运行需要的依赖,devDependencies表示开发环境需要的依赖。
一般生产环境中不需要 Webpack、Eslint、Babel 等打包工具,因此这些依赖会被放在devDependencies中。

格式如下:

"devDependencies": {"babel": "^6.23.0"
}
#固定版本: 安装时只安装这个指定的版本;
#波浪号: 主版本号、次版本号下允许的最新版本;
#插入号: 主版本号下允许的最低版本;
#latest:安装最新的版本

执行npm install时会自动将依赖项记录到package.json文件中。

(4) 脚本

"scripts": {"test": "echo \"Error: no test specified\" && exit 1"
}

当命令行执行 npm run test时,执行test命令对应的语句.

2.babel

JS不断发展,浏览器的适配速度没有跟上,引入了一个问题:用高级(ES6+)的JS语法开发的代码,无法在支持低版本(ES5)JS语法的浏览器上运行。babel作为转译工具,可以实现将ES6转译为ES5,为该问题提供了一个解决方案。label常被集成到webpack中进行打包;随着vue3的出现, vite+esbuild的占有率相比webpack+babel更高。

2.1.组成

babel是一个工具链集,由以下部分组成:
[1] 核心@babel/core:
babel的核心包,集成了整个Babel的工作流,类似计算机主板的作用。
[2] 编译器 @babel/parser,@babel/traverse,@babel/generator:
parser对源码进行解析得到AST(抽象语法树),traverse对语法书进行遍历,并调用插件对其进行转义,得到新的语法树;generator根据新的语法树生成ES5代码;
[3] 插件和预设:
babel整体提供了一个执行流程的框架,实际的转义工作需要依赖于具体的插件。如: @babel/plugin-transform-arrow-functions插件的作用是将ES6的箭头函数语法转换为ES5的普通函数语法, @babel/plugin-transform-for-of插件的作用是将ES6的for…of循环语法转换为ES5可理解的语法等。预设是对插件进行的一些组装或者条件组装,从而减少了重复工作(通过引入一个预设而不需要引入多个插件)。

插件的转换可以分为两种类型:
(1)语法转义,如箭头函数和for…of的转换,可通过babel语法插件实现;
(2)API和内置对象的转义,Promise、Array、Symbol等的转换,需要使用pollyfill(垫片)机制实现。pollyfill实现原理较为简单,直接在全局对象中引入ES6中新增API的定义(垫片),来模拟一个ES6环境;从而可以运行ES6的API。

**说明:**直接在全局对象中引入ES6的垫片是babel6中的 babel-polyfill的实现方式,容易造成全局污染;在babel7中不再建议使用babel-polyfill,推荐使用 @babel/polyfill替代方案,@babel/polyfill采用了更加模块化的方式来引入垫片。二者底层是对core.js和regenerator-runtime这两个库的封装。

2.2 使用方式

2.2.1 安装babel

babel作为编译期间使用的依赖,使用如下命令进行安装:

npm install --save-dev @babel/core @babel/cli @babel/preset-env

2.2.2 配置依赖

在项目根目录下新建.babelrc文件,在.babelrc配置文件中进行插件和预设的配置。一般而言,配置preset-env能满足大部分场景:

{"plugins": [],"presets": ['@babel/preset-env']
}

plugins和presets的运行顺序为: plugins -> presets, plugins是从前往后执行, presets是从后往前执行。

也可以将配置放在package.json中,如下所示:

{"dependencies": {//...},//..."babel": {"presets": ["env"],"comments": false}
}

preset-env预设会根据指定的目标环境自动确定需要哪些Babel插件和polyfills,从而进行必要的代码转换。preset-env中支持配置浏览器的版本,babel保证生成的代码可以被对应的浏览器所识别。

2.2.3 案例介绍

step1: 执行npm init -y快速创建一个项目;

step2: 执行npm install --save-dev @babel/core @babel/cli @babel/preset-env安装babel;

step3: 新建src文件夹和src/index.js和src/module1.js文件(index.js依赖module1.js模块):
index.js

import {print} from "./module1";
print();// 1.箭头函数
var a = () => {};

module1.js

function fetchData() {  // 2.Promisereturn new Promise((resolve, reject) => {  setTimeout(() => {  resolve('hello world');}, 1000);  });  
}  export var print = function() {fetchData().then(data => {  console.log('数据获取成功:', data);  }).catch(error => {  console.error('数据获取失败:', error);  });
}

step4: 修改package.json, 添加构建脚本命令:

{// ..."scripts": {// 编译src目录下的js文件,并输出到lib目录下"build": "babel src -d lib"}
}

step5: 在项目根路径下添加babel配置文件:

{"plugins": [], "presets": [["@babel/preset-env",{"corejs": 3,"useBuiltIns": "usage"}]]
}

step6: 在项目路径下,执行npm run build, 得到的js如下所示:

index.js:

"use strict";var _module = require("./module1");
(0, _module.print)();
// 1.箭头函数已转换
var a = function a() {};

module1.js:

"use strict";
// 在module1模块中引入promise,模拟ES6
require("core-js/modules/es.object.define-property.js");
Object.defineProperty(exports, "__esModule", {value: true
});
exports.print = void 0;
require("core-js/modules/es.object.to-string.js");
require("core-js/modules/es.promise.js");
require("core-js/modules/web.timers.js");
function fetchData() {return new Promise(function (resolve, reject) {setTimeout(function () {resolve('hello world');}, 1000);});
}
var print = exports.print = function print() {fetchData().then(function (data) {console.log('数据获取成功:', data);})["catch"](function (error) {console.error('数据获取失败:', error);});
};

3.webpack

webpack是一个前端项目的打包工具,默认仅支持对低版本JS的打包, 可通过loader方式增加可处理文件的类型,另外通过插件机制对webpack的功能进行增强。

3.1 安装webpack

#webpack是全局的工具,也可以通过-g安装至全局
npm i webpack webpack-cli -Dnpm i webpack-dev-server -D

3.2 配置文件

webpack的配置文件放在项目根路径下,名称为webpack.config.js:

module.exports = {entry: "打包入口",output: "打包出口", mode: "运行环境",module: {},//配置loader plugins: [] //插件配置
};

如上所示,常用的配置有:
**[1] entry配置打包入口:**可以配置单个文件或者多个文件

// 指定一个打包入口:
module.exports = {entry: "./src/index.js", //打包⼊⼝⽂件
}// 指定多个打包入口
module.exports = {entry: {index: './src/index.js',index2: './src/index2.js'}
}

[2] output配置打包的出口

const path = require('path');
module.exports = {output:{//_dirname 是一个全局变量,根目录的绝对路径path:path.join(__dirname, './dist'),  //输出文件存放路径filename:'bundle.js'   //输出文件的名称}
}

[3] mode执行环境信息

可以设置为develop或者production,develop打包时不会进行文件压缩,速度较快,使用于开发环境;部署时,使用production模式打包。

[4] module配置loader

如下所示为处理css的loader:

module.exports = {module: {rules: [{test: /\.css$/i,  use: ["style-loader", "css-loader"]}]}
}

上面涉及到的test: /\.css$/i为正则表达式,匹配后,才会使用style-loader和css-loader.
其中:/表示正则表达式的开始或者结束,\转义字符,.表示点号;$表示结尾,i表示忽略大小写。loader执行顺序为反向,即css-loader读取css文件处理后交给style-loader,style-loader处理后将模块信息保存到内存中,转交给webpack,webpack对模块进行打包。

在webpack配置style-loader和css-loader时,需要保证当前环境已经安装了相应的依赖,否则需要执行以下命令:

npm install style-loader css-loader -D

[5] plugins配置插件

常用插件有html-webpack-plugin和webpack-parallel-uglify-plugin等.

module.exports = {plugins:[htmlPlugin,cleanPlugin]
}

3.3 webpack打包流程

webpack中认为每个文件是一个模块,多个关联的模块可以编组为一个Chunk, 打包的产物为一个或多个Bundle。具体而言,webpack从配置文件中entry配置的打包入口出发,根据模块的依赖关系构建依赖图,并将依赖关系分割成不同的Chunk, 每个Chunk平行地构建(可以提高打包速度),每个chunk生成一个bundle。对于chunk中每个模块, 构建流程如下:
[1] 当前模块是js文件且不包含高级语法:webpack直接处理;

否则: [2] 是否配置loader ? 调用loader加载模块并将处理后的模块信息转交给webpack : 报错。

3.4 webpack整合babel

根据babel章节中介绍的内容配置babel,然后在webpack的配置文件中进行如下配置:

module.exports = {module: {rules: [  // exclude用于排除文件{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}]}
}

配置后,webpack打包时,如果遇到高级语法的js文件,会经过babel-loader转换。

3.5 案例介绍

3.5.1 项目初始化

执行npm init -y初始化项目后,得到一个package.json文件:

{"name": "demo","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"
}

准备项目的资源文件,目录树设计为:

-src-index.js-module1.js
-index.html
-package.json
-package-lock.json

index.html

<!DOCTYPE html>
<html><head><title>demo</title></head><body><script src="./dist/bundle.js"></script></body>
</html>

index.js

// index.js
import {getMessage} from "./module1";
console.log(getMessage());

module1.js

// module1.js
export function getMessage(){return "[webpack] hello world";
}

3.5.2 安装和配置babel

安装babel:

npm install --save-dev @babel/core @babel/cli @babel/preset-env

配置babel:

在根目录下新建babel的配置文件.babelrc:

{"plugins": [], "presets": [["@babel/preset-env",{"corejs": 3,"useBuiltIns": "usage"}]]
}

3.5.3 安装和配置webpack

安装webpack:

npm i webpack webpack-cli webpack-dev-server -D

安装babel-loader:

npm install babel-loader -D

配置webpack:

在根目录下创建webpack.config.js文件并配置:

const path = require("path")module.exports = {mode:"development",entry:"./src/index.js",output:{filename:"main.js",path: path.resolve(__dirname, "dist"),},module: {rules: [{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}]}
}

3.5.4 运行结果

配置package.json文件:

"scripts": {//添加build命令"build": "npx webpack"
}

运行npm run build命令:

> demo@1.0.0 build
> npx webpackasset main.js 4.13 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 132 bytes./src/index.js 66 bytes [built] [code generated]./src/module1.js 66 bytes [built] [code generated]
webpack 5.91.0 compiled successfully in 1265 ms

在浏览器中查看打印信息如下:

[webpack] hello world

这篇关于前端系列-3 前端打包工具和插件介绍(npm+babel+webpack)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/942859

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

这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!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

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

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

springboot3打包成war包,用tomcat8启动

1、在pom中,将打包类型改为war <packaging>war</packaging> 2、pom中排除SpringBoot内置的Tomcat容器并添加Tomcat依赖,用于编译和测试,         *依赖时一定设置 scope 为 provided (相当于 tomcat 依赖只在本地运行和测试的时候有效,         打包的时候会排除这个依赖)<scope>provided

高效录音转文字:2024年四大工具精选!

在快节奏的工作生活中,能够快速将录音转换成文字是一项非常实用的能力。特别是在需要记录会议纪要、讲座内容或者是采访素材的时候,一款优秀的在线录音转文字工具能派上大用场。以下推荐几个好用的录音转文字工具! 365在线转文字 直达链接:https://www.pdf365.cn/ 365在线转文字是一款提供在线录音转文字服务的工具,它以其高效、便捷的特点受到用户的青睐。用户无需下载安装任何软件,只