Babel编译与Webpack

目录

  • Babel
    • 初识Babel
    • Babel 使用方式
    • 使用 Babel 前的准备工作
  • Webpack
    • Webpack介绍
    • Webpack初体验
    • Webpack核心概念
      • 入口(entry)
      • 出口(output)
      • 加载 (loader)
      • 插件(plugins)

Babel

Babel官网: https://babeljs.io/

初识Babel

Babel 是一个广泛使用的 JavaScript 编译器,用于将新版本的 JavaScript 代码转换为向后兼容的旧版本 JavaScript 代码。在不同的浏览器和环境中使用最新的语言特性和功能,同时保持代码的兼容性。

Babel 的一些主要功能和用途:

  1. 语法转换:Babel 可以将 ECMAScript 2015+(ES6+)的语法转换为旧版本 JavaScript,以确保代码在旧版浏览器和环境中的正常运行。例如,它可以将箭头函数、模板字符串等转换为等效的 ES5 语法。

  2. 客户端/服务器端支持:Babel 能够处理客户端和服务器端上的 JavaScript 代码,并确保它们都能正确地运行。这对于使用最新的语言特性来编写跨平台应用程序非常有帮助。

  3. 插件扩展性:Babel 提供了丰富的插件系统。通过选择和配置不同的插件,可以实现特定项目或应用程序需要的转换。

  4. 工具链集成:Babel 可以轻松集成到现有的前端工具链中,如 Webpack、Gulp、Rollup 等。这样可以与其他工具和任务一起使用,以便进行更高级的开发和构建流程。

  5. 兼容性管理:Babel 提供了针对不同浏览器和环境的预设(preset),例如 @babel/preset-env,它会根据目标浏览器和环境自动确定需要转换的语法和功能,更好地管理兼容性。

  • 注意:
    • Babel本身可以编译ES6的大部分语法
    • ES6 Module语法一般需要使用Webpack来处理
    • Babel本身不能编译ES6新增的API,需要借助其它的模块

Babel 使用方式

  1. 在构建工具中使用:常见的前端构建工具(如 Webpack、Gulp 等)都能与 Babel 集成。你可以在配置文件中指定 Babel 的转换规则和插件,以及需要进行转换的目标文件。这样,在项目的构建过程中,Babel 将会自动转换你的代码。

  2. 使用命令行工具:Babel 提供了一个命令行工具,可以直接在终端中使用。你可以全局安装 Babel CLI,然后在命令行中执行 Babel 命令,对指定的文件或目录进行转换。例如,你可以使用以下命令将 src 目录下的文件转换为输出到 dist 目录中:

    npm babel src --out-dir dist
    

    你还可以通过命令行参数指定需要使用的转换规则和插件。

  3. 在 Node.js 中使用:如果你在 Node.js 环境中编写代码,并希望将其进行转换,可以通过在代码中引入 Babel,并使用其 API 进行转换。你需要先安装 @babel/core 和所需的转换规则及插件,然后在代码中使用 Babel API 来进行转换。

使用 Babel 前的准备工作

  1. Node.js 和 npm:

    • Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,它使 JavaScript 可以在服务器端运行。Babel 通常与 Node.js 一起使用。
    • npm 是 Node.js 的包管理器,用于安装和管理 JavaScript 包和依赖项。
  2. 安装 Node.js:

    • 访问 Node.js 官方网站(https://nodejs.org/),下载并安装适合你操作系统的 Node.js 版本。
  3. 初始化项目:

    • 在命令行中进入你的项目目录,并执行 npm init 命令来初始化你的项目。这将会创建一个 package.json 文件,其中记录了项目信息和依赖项。
    • 在package.json文件添加执行编译的命令
      在这里插入图片描述
  4. 安装 Babel 相关包:

    • 执行以下命令来安装 Babel 所需的核心依赖包:
      npm install --save-dev @babel/core @babel/cli
      
    • 根据项目需求,还可以安装其他 Babel 的插件和预设。例如,如果需要将 ES6+ 语法转换为 ES5 语法,可以安装 @babel/preset-env
      npm install --save-dev @babel/preset-env
      
  5. 创建配置文件.babelrc,并配置:

    {"presets":["@babel/preset-env"]
    }	
    
  6. 编译并测试:

    npm run bulid
    

Webpack

Webpack介绍

Webpack 是一个现代化的静态模块打包器(module bundler),它能够将多个前端资源(如 JavaScript、CSS、图片等)打包成一个或多个静态资源文件,以优化应用程序的性能。

Webpack 的一些重要特点和功能:

  1. 模块化开发:Webpack 支持使用模块化来组织代码。你可以使用类似于 ES6 import/export 语法的方式导入和导出模块,使代码更具可维护性和可复用性。

  2. 打包编译:Webpack 将应用程序的所有依赖项视为模块,并通过解析这些依赖项的关系图来构建一个依赖图。然后,它使用不同的 loader 来处理不同类型的文件,并将它们转换成浏览器可以理解的格式。

  3. 代码拆分:Webpack 支持将应用程序拆分成多个块,以实现按需加载。这样,只有在需要时才会加载额外的代码块,从而提高初始加载速度。

  4. 插件系统:Webpack 提供了丰富的插件系统,以增强其功能。你可以通过配置文件中的 plugins 属性来使用插件,它们可以用于优化资源、压缩代码、注入环境变量等增值功能。

  5. 开发者友好性:Webpack 提供了开发人员友好的功能,如热模块替换(Hot Module Replacement)和代码分析工具等。这些功能可以帮助开发者提高开发效率、调试并优化应用程序。

  6. 生态系统:Webpack 拥有庞大的生态系统,可以与许多其他工具和框架无缝集成,如 Babel、React、Vue.js 等。

Webpack初体验

  1. 初始化项目:

    • 在命令行中进入你的项目目录,并执行 npm init 命令来初始化你的项目。这将会创建一个 package.json 文件,其中记录了你的项目信息和依赖项。
    • 在package.json文件添加执行编译的命令在这里插入图片描述
  2. 安装 webpack 相关包:

    • 执行以下命令来安装 webpack 的核心依赖包以及其他必要的包:
      npm install --save-dev webpack webpack-cli
      
  3. 配置 webpack:

    • 在项目根目录下创建一个名为 webpack.config.js 的文件,用于存放 webpack 的配置信息。
    • 编辑 webpack.config.js 文件,配置 webpack 的入口、输出以及其他需要的 loader 和 plugin。例如,可以指定入口文件和输出文件的位置、配置转换规则的 loader、使用的插件等。
  4. 打包并测试:

    • 编写需要打包的 JavaScript 代码,并确保在代码中引入了其他模块。
    • 在命令行中执行 npm run webpack 命令来进行打包,默认情况下,Webpack 会根据 webpack.config.js 中的配置进行打包,生成最终的输出文件。

Webpack核心概念

入口(entry)

  • 入口指示了 Webpack 构建的起点,即从哪个模块开始构建依赖图。
  • 通常情况下,一个应用程序会有一个或多个入口点。可以通过配置文件中的 entry 属性来指定入口文件的路径或多个入口文件的数组。
  • 入口可以是一个 JavaScript 文件,也可以是其他类型的文件,取决于项目需求。Webpack将根据入口文件来解析并构建整个依赖图。

例子:

module.exports = {entry: './src/index.js',// 或者多个入口点// entry: {//   app: './src/app.js',//   vendor: './src/vendor.js'// },// ...
};

出口(output)

  • 输出指定了 Webpack 构建后生成的文件及其位置。
  • 在 Webpack 构建完成后,最终生成的文件会被写入到 output 指定的路径。
  • 通过配置文件中的 output 属性来指定输出路径、输出文件名以及其他选项(如公共路径、导出的模块格式等)。
  • 输出路径可以是相对路径或绝对路径,并支持使用占位符来定义文件名,以确保输出文件的唯一性。

例子:

module.exports = {// ...output: {path: 'dist',filename: 'bundle.js',},
};

加载 (loader)

loader 让webpack能够去处理那些非JS文件的模块

  1. 安装 babel-loader:
    运行 npm install --save-dev babel-loader 命令来安装 babel-loader。

  2. 安装 Babel 相关依赖项:
    运行 npm install --save-dev @babel/core @babel/preset-env 命令来安装 Babel 的核心和预设环境。

  3. 配置 babel-loader:
    在 webpack.config.js 文件中完成 babel-loader 的配置。在 module.rules 数组中添加以下规则:

    module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}}]
    }
    
  4. 引入 core-js:
    运行 npm install --save-dev core-js 命令来安装 core-js。
    在 JavaScript 入口文件中,如 index.js,在需要使用新增 API 的位置添加以下代码:
    javascript import 'core-js/stable';

  5. 打包并测试:
    运行 npm run webpack 命令来进行编译和测试。

插件(plugins)

与 loader 不同,loader 主要用于帮助 Webpack 处理各种模块,而插件可以实现更广泛的任务。

  1. html-webpack-plugin 是一个常用的 Webpack 插件,用于生成 HTML 文件并自动注入打包后的资源。它会根据配置生成一个或多个 HTML 文件,并将 webpack 打包后的脚本、样式等资源注入到生成的 HTML 中。

  2. 要安装 html-webpack-plugin,可以运行以下命令:

    npm install --save-dev html-webpack-plugin

  3. 配置 html-webpack-plugin 插件时,可以提供一些选项来自定义生成的 HTML 文件。下面是一些常用的配置选项:

    • template:指定 HTML 模板文件的路径。可以使用一个自定义模板来生成 HTML 文件。
    • filename:指定生成的 HTML 文件的名称。默认为 ‘index.html’。
    • title:设置 HTML 文件的标题。
    • inject:指定脚本标签的注入位置。可选值有 ‘head’、‘body’ 或 ‘true’(默认为 ‘body’)。
    • minify:是否对生成的 HTML 进行压缩,默认为 false。可以提供一个对象来指定压缩选项。
  4. 多页面时,可以配置多个 html-webpack-plugin 实例来生成多个 HTML 文件。每个实例可以有自己的模板、文件名等配置选项,从而生成不同的 HTML 文件。

    • 在 webpack.config.js 文件中进行配置:
    const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {// 基本的 Webpack 配置...entry: {app: './src/index.js',about: './src/about.js',},output: {// 输出路径和文件名等基本配置...},plugins: [new HtmlWebpackPlugin({template: 'src/templates/index.html',filename: 'index.html',chunks: ['app'],title: '首页'}),new HtmlWebpackPlugin({template: 'src/templates/about.html',filename: 'about.html',chunks: ['about'],title: '关于我们'}),],
    };
    

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

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

相关文章

【ASP.NET MVC】动态与静态网站(3)

一、区别 静态网页(站) 用户通过浏览器提交访问需求,需求可以是默认首页或者指定的网站中的某个页面,WEB服务器查找对应的网页,通过HTTP协议发送到客户端,完成访问。 特点:每次访问、不同角色…

PHP 前后端分离,运行配置

H5 WEB目录:安装 yarn install、npm install (依赖包) 在电脑:安装nodejs Composer下载 :https://getcomposer.org/

K8s影响Pod调度和Deployment

5.应用升级回滚和弹性伸缩

【飞书】飞书导出md文档 | 飞书markdown文档导出 | 解决飞书只能导出pdf word

一、飞书导出markdown github地址:https://github.com/Wsine/feishu2md 这是一个下载飞书文档为 Markdown 文件的工具,使用 Go 语言实现。 请看这里:招募有需求和有兴趣的开发者,共同探讨开发维护,有兴趣请联系。 二、…

大数据Flink(五十三):Flink流处理特性、发展历史以及Flink的优势

文章目录 Flink流处理特性、发展历史以及Flink的优势 一、Flink流处理特性 二、发展历史

uni-app引用外部图标库(阿里矢量图)

uni-app引用外部图标库(阿里矢量图) 作为前端程序员,nui-app是必备的,但是有时候内置的图标,组件又不完全满足,这里就可以引进外部图标,这里引用的是阿里矢量图标 第一步,在项目目…

「如何优雅有效利用周末和下班时间?」

文章目录 每日一句正能量前言下班的时间规划周末的时间规划提升周末体验感的好方法怎样才能获得充分的休息后记 每日一句正能量 眼望古城街尽,心谱落愁无序,旧时的誓言,曾而相似,河水在遵循河道的指引下,在曲折前进中放…

【爬虫案例】用Python爬取iPhone14的电商平台评论

用python爬取某电商网站的iPhone14评论数据, 爬取目标: 核心代码如下: 爬取到的5分好评: 爬取到的3分中评: 爬取到的1分差评: 所以说,用python开发爬虫真的很方面! 您好&…

springCloud Eureka注册中心配置详解

1、创建一个springBoot项目 2、在springBoot项目中添加SpringCloud依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-dependencies</artifactId><version>2021.0.3</version><type>…

使用SSM框架实现个人博客管理平台以及实现Web自动化测试

文章目录 前言1. 项目概述2. 项目需求2.1功能需求2.2 其他需求2.3 系统功能模块图 3. 开发环境4. 项目结构5. 部分功能介绍5.1 数据库密码密文存储5.2 统一数据格式返回5.3 登录拦截器 6. 项目展示7. 项目测试7.1 测试用例7.2 执行部分自动化测试用例 前言 在几个月前实现了一…

4 Promethues监控主机和容器

目录 目录 1. 监控节点 1.1 安装Node exporter 解压包 拷贝至目标目录 查看版本 1.2 配置Node exporter 1.3 配置textfile收集器 1.4 启动systemd收集器 1.5 基于Docker节点启动node_exporter 1.6 抓取Node Exporter 1.7 过滤收集器 2. 监控Docker容器 2.1 运行cAdviso…

【微软知识】微软相关技术知识分享

微软技术领域 一、微软操作系统&#xff1a; 微软的操作系统主要是 Windows 系列&#xff0c;包括 Windows 10、Windows Server 等。了解 Windows 操作系统的基本使用、配置和故障排除是非常重要的。微软操作系统&#xff08;Microsoft System&#xff09;是美国微软开发的Wi…

电商高并发设计之SpringBoot整合Redis实现布隆过滤器

文章目录 问题背景前言布隆过滤器原理使用场景基础中间件搭建如何实现布隆过滤器引入依赖注入RedisTemplate布隆过滤器核心代码Redis操作布隆过滤器验证 总结 问题背景 研究布隆过滤器的实现方式以及使用场景 前言 本篇的代码都是参考SpringBootRedis布隆过滤器防恶意流量击穿缓…

Data Structure, Algorithm,and Applications in C++

在学习这本书进阶内容之前&#xff0c;我们可以跟着它的第一章部分再巩固和复习。本书由Sartaj Sahni撰写&#xff0c;由王立柱和刘志红翻译。全书通俗易懂&#xff0c;内容丰富&#xff0c;是巩固C内容的不二选择。希望本文对各位有所帮助。 目录 1.函数与参数 1.1.传值参数…

wxwidgets Ribbon构建多个page与按钮响应

新建一个控制台应用程序&#xff0c;添加好头文件的依赖与lib库文件的依赖&#xff0c;修改属性&#xff1a; 将进入ribbon界面的文件与主界面的类分开&#xff1a; 1、RibbonSample.cpp #include "stdafx.h" #include "MyFrame.h" class MyApp : public…

flutter:轮播

前言 介绍几个比较有不错的轮播库 swipe_deck 与轮播沾边&#xff0c;但是更多的是一种卡片式的交互式界面设计。它的主要概念是用户可以通过左右滑动手势浏览不同的卡片&#xff0c;每张卡片上都有不同的信息或功能。 Swipe deck通常用于展示图片、产品信息、新闻文章、社…

【WebRTC---序篇】(七)RTC多人连麦方案

服务端可以选择mediasoup&#xff0c;作为SFU服务器&#xff0c;只负责转发数据 下图举例三个Client (browser或者客户端)同时加入一个房间&#xff0c;每个app同时发布一路视频和一路音频&#xff0c;并且接受来自其他app的音视频流&#xff0c;mediasoup内部的结构如下&…

使用Django自带的后台管理系统进行数据库管理的实例

Django自带的后台管理系统主要用来对数据库进行操作和管理。它是Django框架的一个强大功能&#xff0c;可以让你快速创建一个管理界面&#xff0c;用于管理你的应用程序的数据模型。 使用Django后台管理系统&#xff0c;你可以轻松地进行以下操作&#xff1a; 数据库管理&…

宝塔Linux面板Java项目一键部署(springboot)

部署项目之前请安装相关软件: jdk1.8、redis、nginx 、mysql 等等(项目中用到的) 1. 网站 2. 创建项目文件夹 文件 - /www/wwwroot - 新建项目文件夹 - 存放jar文件 3. 上传jar文件 (直接拖进来) 4. 添加Java项目 5. jar包路径 - 项目端口, 提交(启动项目) 6. 成功运行 7. 浏览…

.NET网络编程——TCP通信

一、网络编程的基本概念 : 1. 网络 就是将不同区域的电脑连接到一起&#xff0c;组成局域网、城域网或广域网。把分部在不同地理区域的计算机于专门的外部设备用通信线路 互联成一个规模大、功能强的网络系统&#xff0c;从而使众多的计算机可以方便地互相传递信息&#xff0c…