第五十六篇:webpack的loader(四) -打包js中的高级语法
好家伙,
1.打包处理js文件中的高级语法
webpack只能打包处理一部分高级的JavaScript 语法。对于那些webpack无法处理的高级js 语法,需要借
助于 babel-loader 进行打包处理。
例如 webpack无法处理下面的JavaScript代码:
// 1.定义了名为 info 的装饰器
function info(target) {
// 2.为目标添加静态属性 info
target.info = 'Person info'
} // 3.为Person 类应用 info 装饰器
@info
class Person {} //4.打印 Person 的静态属性 info
console.log(Person.info)
此处运用到了一个名为装饰器的高级语法,webpack无法对其进行打包,
(基于干不过就叫人的思想)这里我们借助于 babel-loader 进行打包处理。
(babel是一个插件 => babel是webpack的插件 => 所以babel是插件的插件)
2.babel-loader的安装和配置
2.1 安装 babel-loader 相关的包
运行如下的命令安装对应的依赖包:
npm i babel-loader@8.2.2 @babel/core@7.14.6@babel/plugin-proposal-decorators@7.14.5-D
在webpack.config.js的 module -> rules 数组中,添加 loader 规则如下:
// 注意:必须使用 exclude 指定排除项;因为 node_modules 目录下的第三方包不需要被打包
{ test: /\.jss/, use: 'babel-loader', exclude: /node_modules/ }
2.2配置 babel-loader
在项目根目录下,创建名为babel.config.js的配置文件(与webpack有个webpack.config.js配置文件一样),定义Babel的配置项如下:
module.exports={
// 声明 babel 可用的插件
// 将来 ,webpack 在调用 babel-loader的时候,会优先加载plugins插件来使用
plugins: [['@babel/plugin-proposal-decorators',{ legacy: true }]] }
插件的的可选配置项,
可以直接上官网文档去找Babel 中文文档 · 下一代 JavaScript 编译器 (docschina.org)
webpack的配置是较难的,一般平时就直接用第三方的默认配置了,
这里是浅显的了解一下webpack的原理
That's all
第五十六篇:webpack的loader(四) -打包js中的高级语法的更多相关文章
- 第五十六篇、OC打开本地和网络上的word、ppt、excel、text等文件
iOS打开本地和网络上的word.ppt.excel.text等文件 iOS开发过程中可能需要预览一些文件,这些文件的格式可能有word.ppt.excel等文件格式.那么系统提供两个类去预览这些文件 ...
- 《手把手教你》系列技巧篇(五十六)-java+ selenium自动化测试-下载文件-上篇(详细教程)
1.简介 前边几篇文章讲解完如何上传文件,既然有上传,那么就可能会有下载文件.因此宏哥就接着讲解和分享一下:自动化测试下载文件.可能有的小伙伴或者童鞋们会觉得这不是很简单吗,还用你介绍和讲解啊,不说就 ...
- Python之路【第十六篇】:Django【基础篇】
Python之路[第十六篇]:Django[基础篇] Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了O ...
- 【Visual C++】游戏开发五十六 浅墨DirectX教程二十三 打造游戏GUI界面(一)
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/16384009 作者:毛星云 ...
- Egret入门学习日记 --- 第十六篇(书中 6.10~7.3节 内容)
第十六篇(书中 6.10~7.3节 内容) 昨天搞定了6.9节,今天就从6.10节开始. 其实这个蛮简单的. 这是程序员模式. 这是设计师模式. 至此,6.10节 完毕. 开始 6.11节. 有点没营 ...
- 解剖SQLSERVER 第十六篇 OrcaMDF RawDatabase --MDF文件的瑞士军刀(译)
解剖SQLSERVER 第十六篇 OrcaMDF RawDatabase --MDF文件的瑞士军刀(译) http://improve.dk/orcamdf-rawdatabase-a-swiss-a ...
- 第三百五十六节,Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy分布式爬虫要点
第三百五十六节,Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy分布式爬虫要点 1.分布式爬虫原理 2.分布式爬虫优点 3.分布式爬虫需要解决的问题
- “全栈2019”Java第五十六章:多态与字段详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- 跟我学SpringCloud | 第十六篇:微服务利剑之APM平台(二)Pinpoint
目录 SpringCloud系列教程 | 第十六篇:微服务利剑之APM平台(二)Pinpoint 1. Pinpoint概述 2. Pinpoint主要特性 3. Pinpoint优势 4. Pinp ...
随机推荐
- JS:&&运算符
&&逻辑运算符 当&&连接语句时,两边的语句会转化为布尔类型 1.两边条件都为true时,结果才为true: 2.如果有一个为false,结果就为false: 3.当第 ...
- Java基础-JVM篇
1.1 .线程 这里所说的线程指程序执行过程中的一个线程实体.JVM 允许一个应用并发执行多个线程.Hotspot JVM 中的 Java 线程与原生操作系统线程有直接的映射关系.当线程本地存储. ...
- STM32 移植 RT-Thread 标准版的 FinSH 组件
一.移植准备 开发版STM32F10xC8T6 准备好移植RT-Thread的移植工程 没动手移植过RT-Thread的小伙伴,可以看RT-Thread移植到stm32 我这里是将控制台信息打印到串口 ...
- 链表设计与Java实现,手写LinkedList这也太清楚了吧!!!
链表设计与实现 在谈链表之前,我们先谈谈我们平常编程会遇到的很常见的一个问题.如果在编程的时候,某个变量在后续编程中仍需使用,我们可以用一个局部变量来保存该值,除此之外一个更加常用的方法就是使用容器了 ...
- java-Stream的总结
JAVA中的Stream 01.什么是Stream Stream是JDK8中引入,Stream是一个来自数据源的元素序列并支持聚合操作.可以让你以一种声明的方式处理数据,Stream 使用一种类似用 ...
- echart图表中y轴小数位数过长展示效果不佳
业务中后端返回的精密数据,小数过长,导致所有数据差距不大,在图表中显示重合为一条直线 解决方法设置echart的min属性 min: "dataMin", 但是设置了以后又出现了问 ...
- 004 SpringSecurity验证规则
SpringSecurity验证规则 SpringSecurity框架登录后,==在userDetails对象中,一定会有一个权限列表 == 登录用户对象的值可能是: {"authoriti ...
- HTTP协议之Expect爬坑
前言 今天,在对接一个第三方平台开放接口时遇到一个很棘手的问题,根据接口文档组装好报文,使用HttpClient发起POST请求时一直超时,对方服务器一直不给任何响应. 发起请求的代码如下: usin ...
- HBase学习(一) 基本概念和安装基本命令
HBase学习(一) 一.了解HBase 官方文档:https://hbase.apache.org/book.html 1.1 HBase概述 HBase 是一个高可靠性.高性能.面向列.可伸缩的分 ...
- stringstrean类中关于clear和str的比较
stringstream类涉及到多次类型转换的时候容易出现异常错误 因为第一次数据如果读入eof或者输出完整来到eof,此时stringstream会自动为其添上eofbit标志位,此时继续进行任何操 ...