热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Webpack与Babel配置详解及优化策略

Webpack与Babel的配置详解及优化策略深入探讨了这两个工具在现代前端开发中的应用。Babel作为一款强大的JavaScript编译器,能够将最新版的JavaScript代码转换为广泛兼容的版本,从而突破浏览器对ES规范的支持限制,确保开发者可以无缝使用最新的语言特性。本文不仅介绍了如何高效配置Webpack与Babel,还提供了多种优化策略,以提升构建性能和代码质量。
webpack – babel设置

babel是一个Javascript编译器,是前端开辟中的一个利器。它突破了阅读器完成es规范的限定,使我们在开辟中能够运用最新的Javascript语法。

经由过程构建和babel,能够运用最新js语法举行开辟,末了自动编译成用于阅读器或node环境的代码。

webpack中运用babel

合营webpack运用babel前,须要起首运用npm init初始化一个项目,npm install -g webpack装置webpack(全局装置是为了在敕令行运用webpack敕令)。

  • 装置babel-loader, babel-core, babel-preset-env。

npm install --save-dev babel-loader babel-core babel-preset-env
个中,babel-preset-env插件是为了通知babel只编译同意的内容,相当于babel-preset-es2015, es2016, es2017及最新版本。经由过程它能够运用最新的js语法。

  • 设置webpack.config.js

在webpack设置文件中设置bable-loader

module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['env',{
targets: {
browsers: ['> 1%', 'last 2 versions']
}
}]
]
}
},
exclude: '/node_modules/'
}
]
}

个中,exclude是定义不愿望babel处置惩罚的文件。targets是presets的一些预设选项,这里示意将js用于阅读器,只确保占比大于1%的阅读器的特征,主流阅读器的最新两个主版本。
更多与设置有关的信息,能够参考:
babel env preset设置,
browserlist预设置.

  • 在敕令行中运转响应webpack敕令即可。
  • 因为babel-preset设置选项较多,我们平常能够在根目录下竖立.babelrc文件,特地用来安排babel preset设置,这是一个json文件。能够将上述设置修正以下:

//.bablerc文件
{
"presets": [
['env',{
"targets": {
"browsers": ['> 1%', 'last 2 versions']
}
}]
]
}
//原webpack.config.js文件
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader'
},
exclude: '/node_modules/'
}
]
}

babel-polifill插件

在上面的babel设置中,babel只是将一些es6,es7-8的语法转换成相符目的的js代码,然则假如我们运用一些特征或要领,比方Generator, Set, 或许一些要领。babel并不能转换为低版本阅读器识别的代码。这时候就须要babel-polifill。

简朴的说,polifill就是一个垫片,供应了一些低版本es规范对高等特征的完成。运用polifill的要领以下:

npm install --save babel-polifill

然后在运用进口引入polifill,要确保它在任何其他代码/依靠声明前被挪用。

//CommonJS module
require('babel-polyfill');
//es module
import 'babel-polifill';

在webpack.config.js中,将babel-polifill到场entry数组中:

entry: ["babel-polifill", "./app.js"]

比拟于runtime-transform,polifill用于运用开辟中。会增加响应变量到全局,所以会污染全局变量。

更多细节参考babel-polifill。

runtime-transform插件

runtime transform也是一个插件,它与polifill有些相似,但它不污染全局变量,所以常常用于框架开辟。

装置:
npm install --save-dev babel-plugin-transform-runtime

npm install --save babel-runtime

用法:
将下面内容增加到.bablerc文件中

{
"plugins": ["transform-runtime"]
}

更多细节参考bable-runtime-transform插件。


推荐阅读
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • golang常用库:配置文件解析库/管理工具viper使用
    golang常用库:配置文件解析库管理工具-viper使用-一、viper简介viper配置管理解析库,是由大神SteveFrancia开发,他在google领导着golang的 ... [详细]
  • 深入解析JVM垃圾收集器
    本文基于《深入理解Java虚拟机:JVM高级特性与最佳实践》第二版,详细探讨了JVM中不同类型的垃圾收集器及其工作原理。通过介绍各种垃圾收集器的特性和应用场景,帮助读者更好地理解和优化JVM内存管理。 ... [详细]
  • 本文详细介绍了Java中org.neo4j.helpers.collection.Iterators.single()方法的功能、使用场景及代码示例,帮助开发者更好地理解和应用该方法。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • PyCharm下载与安装指南
    本文详细介绍如何从官方渠道下载并安装PyCharm集成开发环境(IDE),涵盖Windows、macOS和Linux系统,同时提供详细的安装步骤及配置建议。 ... [详细]
  • Java 类成员初始化顺序与数组创建
    本文探讨了Java中类成员的初始化顺序、静态引入、可变参数以及finalize方法的应用。通过具体的代码示例,详细解释了这些概念及其在实际编程中的使用。 ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 本文介绍了Java并发库中的阻塞队列(BlockingQueue)及其典型应用场景。通过具体实例,展示了如何利用LinkedBlockingQueue实现线程间高效、安全的数据传递,并结合线程池和原子类优化性能。 ... [详细]
  • 数据管理权威指南:《DAMA-DMBOK2 数据管理知识体系》
    本书提供了全面的数据管理职能、术语和最佳实践方法的标准行业解释,构建了数据管理的总体框架,为数据管理的发展奠定了坚实的理论基础。适合各类数据管理专业人士和相关领域的从业人员。 ... [详细]
  • 本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]
  • [论文笔记] Crowdsourcing Translation: Professional Quality from Non-Professionals (ACL, 2011)
    Time:4hoursTimespan:Apr15–May3,2012OmarZaidan,ChrisCallison-Burch:CrowdsourcingTra ... [详细]
  • Explore how Matterverse is redefining the metaverse experience, creating immersive and meaningful virtual environments that foster genuine connections and economic opportunities. ... [详细]
author-avatar
心動寶貝r
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有