webpack4学习之 babel
webpack之前一知半解,这次有空就把最新的webpack4好好学习一下(2019-05-29 因为webpack的很多东西版本都在升级,网上博客很多都是老版本的,所以加个时间方便大家决定是否有必要阅读)
presets预设
预设是一组插件的集合,插件才是让babel解析之后转换的关键,插件是从前到后,而预设是从后到前执行,插件在 Presets 前运行。
常见的预设有以下几个:
- @babel/preset-env
@babel/preset-env是babel v7新版的,旧版的叫babel-preset-env,按照es年代分有什么babel-preset-es2015(就是转换es6版本的),@babel/preset-es2016之类的,如果一个一个导入到你的项目会很麻烦,新的es出来了你还得加,现在@babel/preset-env就是所有的es集合,有了它,babel-preset-es2015,@babel/preset-es2016都不需要加了(除非你就有什么特定配置)。
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": ["last 2 versions"]
},
"modules": false,
"useBuiltIns": "usage",
"corejs": 3
}
]
]
targets是指转换哪些浏览器,如果没有什么特别的需求,选择默认的就好了
modules 有这些选择"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false, defaults to "auto" 是用来将将es6的模块化语法转换为哪种语法,现在有webpack来做了,这个可以选择false了
useBuiltIns 现在是重点了,选择如下 "usage" | "entry" | false, defaults to false
false就不用解释了,就是不使用这个功能呗。
介绍另外2个我们先看看@babel/polyfill这个东东,它基本包含了所有的babel的功能,使用的方法也很简单,直接在主js上面import "@babel/polyfill";就可以了,缺点也很明显
1 它把所有的功能都导入你的项目里去了,自然会导致你的项目打包过大,如果你不在意自然直接使用最简单,用最少的配置。(usage" | "entry就是用来优化这个的)
2 它会在全局加入一些方法如promise,会导致全局污染
entry选项是这样子的,根据你选择的浏览器环境来决定@babel/polyfill有哪些是需要加入你项目的,如果你的指定的浏览器支持一些语法,就没必要再导入一遍了
usage则是根据你的代码中用到了哪些(直接通过名字来决定)新方法,就从@babel/polyfill加入到你的项目,该方法目前还是实验性的。
corejs 官网的文档配置里目前没有这个,但是“useBuiltIns": "usage"后会提示安装core-js,版本如果为3就要指定版本,并且在主文件以前是import "babel-polyfill";,改为import "core-js/stable"; import "regenerator-runtime/runtime";
- @babel/preset-stage-0 @babel/preset-stage-1 ...
这些其实已经被废弃了,不过挺经典的值得了解一下,stage-0是指标准,目前还没有纳入es的一些功能,装饰器就是其中之一
stage0 (https://babeljs.io/docs/en/babel-preset-stage-0) 只是一个美好激进的想法,一些 Babel 插件实现了对这些特性的支持 ,但是不确定是否会被定为标准.
stage1 (https://babeljs.io/docs/en/babel-preset-stage-1) 值得被纳入标准的特性.
stage2 (https://babeljs.io/docs/en/babel-preset-stage-2) 该特性规范己经被起草,将会被纳入标准里.
stage3 (https://babeljs.io/docs/en/babel-preset-stage-3) 该特性规范已经定稿,大浏览器厂商和 Node.js 社区己开始着手实现.
stage0包含了它下面的,stage1也包含了它下面的的,依次包含。
但是官网说他们被废弃了,具体原因大概是因为太好用了,以至于大家都是stage0就开始用了,但是却不知道stage0到底包括什么,如果规范有了变化,你都不知道到底发生了什么,于是乎babel决定
你想用一些es还没有出来的功能,你要用插件的方式安装具体你需要的而不是一个stage0了事,文档如下
https://github.com/babel/babel/blob/master/packages/babel-preset-stage-0/README.md
@babel/plugin-transform-runtime 和 @babel/runtime
这2个就是用来解决@babel/polyfill的第二个问题,污染环境变量的问题,其实官网上说了,污染的问题只有可能是你的项目作为库使用才会存在,普通的应用程序,直接使用polyfill是没有问题
@babel/runtime是运行时,而@babel/plugin-transform-runtime是插件安在dev上的,
"plugins": [
["@babel/transform-runtime", {
"corejs": 3,
"helpers": true,
"regenerator": true,
"useESModules": false
}]
]
这2个只能用来解决全局变量问题,原型的实例方法没办法加,还是要用到polifill
webpack4学习之 babel的更多相关文章
- webpack4学习笔记(二)
webpack打包各种javascript文件 (本文只是提供一个学习记录,大部分内容来自网络) 一,打包js文件和es6代码 1,webpack命令打包js文件 Tip: 在webpack4.x之前 ...
- webpack4 学习 --- webpack和webpack-dev-server
以前了解过webpack2, 所以对webpack 不是很陌生,就直接入主题吧.新建一个文件夹,就叫它webpack-tut吧.然后在文件中新建一个src 文件夹,存放我们的源文件,再在src 文件夹 ...
- ES6学习之Babel的正确安装姿势
开始学习ES6,写点东西放上博客^_^ 本文介绍Babel6.x的安装过程~ 首先呢,可以使用Babel在线转换 https://babeljs.io/repl/ 然后进入主题:安装Babel(命令行 ...
- Webpack4 学习笔记三 ES6+语法降级为ES5
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 将es6.es7语法降级为es5 需要通过 babel JavaScript编译器. 安装: npm i babel ...
- webpack4.x下babel的安装、配置及使用
前言 目前,ES6(ES2015)这样的语法已经得到很大规模的应用,它具有更加简洁.功能更加强大的特点,实际项目中很可能会使用采用了ES6语法的模块,但浏览器对于ES6语法的支持并不完善.为了实现兼容 ...
- webpack 3.X学习之Babel配置
Babel是什么 Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到: 使用下一代的javascript(ES6,ES7,--)代码,即使当前浏览器没有完成支持: ...
- webpack4 学习 --- 处理静态资源
webpack 是利用loader 来处理各种资源的,wepback的配置基本上就是为各种资源文件,指定不同类型的loader. 1,处理css 最基本的css 处理loader 是css-loade ...
- webpack4学习笔记(一)
webpack4 1,安装webpack npm insatll webpack --save-dev //安装最新版本 npm insatll webpack@<version> --s ...
- Webpack4 学习笔记八 开发环境和生产环境配置
webpack resolve属性 webpack 区分开发环境和生产环境 webpack resolve属性 该选项的作用是设置模块如何被解析. resolve.alias: 设置别名, 在vue中 ...
随机推荐
- koa踩坑记录
1.koa热更新用nodemon 2.koa中暂不支持import/export 3.只发送options请求,没有后续请求 当ctx.set('Access-Control-Allow-Cred ...
- CSS 即将支持嵌套,SASS/LESS 等预处理器已无用武之地?
最近,有一则非常振奋人心的消息,CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting,表示 CSS 嵌套规范即将进入规范的 FWPD 阶段. 目前对应的 ...
- 基于CAS实现SSO单点登录
1. 概述 1.1. 什么是SSO? 单点登录( Single Sign-On , 简称 SSO )是目前比较流行的服务于企业业务整合的解决方案之一, SSO 使得在多个应用系统中,用户只需要 登录一 ...
- Vulhub-Mysql 身份认证绕过漏洞(CVE-2012-2122)
前言 当连接MariaDB/MySQL时,输入的密码会与期望的正确密码比较,由于不正确的处理,会导致即便是memcmp()返回一个非零值,也会使MySQL认为两个密码是相同的.也就是说只要知道用户名, ...
- 用 getchar putchar 来输入和接收 但是要清空缓冲区
1 //用 getchar putchar 来输入和接收 但是要清空缓冲区 2 3 #include <stdio.h> 4 int main() 5 { 6 char ch1,ch2; ...
- Docker 实践及命令梳理
文档 Docker Reference Documentation Docker 从入门到实践 [中文] 安装 安装 Docker,设置开机启动,然后配置阿里云镜像加速 1. 安装 Docker Do ...
- 阿里、腾讯、百度、网易、美团Android面试经验分享,拿到了百度、腾讯offer
基本情况 2021届普通本科,Android开发岗. 此文主要是2020年秋招面试经验汇总,最终拿到了百度.腾讯的offer. 主要包括阿里三面,腾讯四面,百度三面,网易三面,美团一场面完. 阿里(由 ...
- 阿里面试官:Android中binder机制的实现原理及过程?
Binder 是 Android 系统中非常重要的组成部分.Android 系统中的许多功能建立在 Binder 机制之上.在这篇文章中,我们会对 Android 中的 Binder 在系统架构中的作 ...
- 使用Cobertura做代码覆盖率测试
经验总结:首先要把cobertura.jar包含ant的classpath路径中,其次要求它包含在测试用例的classpath中: 使用cobertura做代码覆盖率测试中出现的问题:覆盖率始终为0, ...
- Spring学习02(DI依赖注入)
5.依赖注入(Dependency Injection,DI) 5.1 概念 依赖 : 指Bean对象的创建依赖于容器 . Bean对象的依赖资源 . 注入 : 指Bean对象所依赖的资源 , 由容器 ...