babel基础配置
babel是干什么的
es6语法已经出来很多年,但各家游览器对es6的支持各不相同。为了解决这个问题,babel应运而生。
babel支持把es6语法编译成es5,完全兼容各家游览器,避免兼容性问题出现。
配置babel的时候分两种情况
- 业务贷款开发
- 类库代码开发
why?
babel支持把es6编译成es5,使各家游览器支持。比如es6语法Map、Set。低版本游览器不兼容,需要babel支持。这个时候就用到了@babel/polyfill(垫片,@babel/polyfill使用的时候需要放到业务js代码的最前面),就是重新定义Map方法。
比如 代码
new Map()
babel编译后还是 如上,但是 bable 会在全局定义一个 Map 方法(因为全局定义可能会造成命名污染),如果你是在开发项目业务代码的时候,其实不太用考虑这个问题。但是如果你是在开发类库代码的时候,你的代码可能会被其他的人拿去用,这样就比较危险。
故两种情况配置方法有些许区别!
如下:
业务代码开发
命令行安装babel包
npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-dev
webpack.config.js 配置
module: {
rules: [
{
test: /\.js$/,
// exclude 排除掉不进行 babel-loader 编译
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
// 配置项 很多
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
如果配置的babel的配置项很多,全部集中在webpack.config.js不便于代码的查看和管理
故 可以配置 .babelrc (在webpack.config.js同级目录中新建 .babelrc )
// webpack.config.js中
module: {
rules: [
{
test: /\.js$/,
// exclude 排除掉不进行 babel-loader 编译
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader'
}
}
]
} //.babelrc中
{
"presets": ["@babel/preset-env", {
targets: {
chrome: "67"
},
// 这个配置项配置了 说明在入口文件中 会自动的给我们加上 import '@babel/polyfill' 的功能,故在业务代码中我们不需要手动的添加 import '@babel/polyfill'
useBuiltIns: "usage"
}]
}
组件/类库代码开发(比如开发npm包)
命令行安装依赖包
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
npm install --save @babel/runtime-corejs2
webpack.config.js
module: {
rules: [
{
test: /\.js$/,
// exclude 排除掉不进行 babel-loader 编译
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options:{
"plugins": [
[
// 不在全局中定义变量
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}
}
}
]
}
babel基础配置的更多相关文章
- webpack+babel+react+antd技术栈的基础配置
webpack+babel+react+antd技术栈的基础配置 前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的.还 ...
- webpack基础以及webpack中babel的配置
webpack 安装 npm 初始化,控制台输入 npm init -y webpack 安装 npm i webpack webpack-cli -D 新建 webpack.config.js co ...
- webpack3.x版本实战案例【基础配置篇】(一)
本文旨在通过一个一个实战例子来学习webpack如何配置,更加深入的学习webpack在实战项目中如何配置. 我们学习哪些配置呢? [基础配置] 打包JS 编译ES6 编译typeScript 打包公 ...
- 深入浅出 webpack 之基础配置篇
前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...
- StackExchange.Redis帮助类解决方案RedisRepository封装(基础配置)
本文版权归博客园和作者吴双本人共同所有,转载和爬虫,请注明原文地址.http://www.cnblogs.com/tdws/p/5815735.html 写在前面 这不是教程,分享而已,也欢迎园友们多 ...
- Hibernate 基础配置及常用功能(三)
本章重点讲述Hibernate对象的三种状态以及如何配置二级缓存 有关Hibernate的三种状态如何相互转换网上都能查到,官方文档描述的也比较详细.这里主要是针对几个重点方法做代码演示. 一.状态转 ...
- Emacs学习心得之 基础配置
作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Emacs学习心得之 基础配置 1.前言2.基础配置 一.前言 本篇博文记录了Emacs的一 ...
- nginx 的基础配置[转]
nginx 的基础配置 分类: 工具软件2013-11-13 23:26 11人阅读 评论(0) 收藏 举报 目录(?)[-] 管理配置文件 全局配置 虚拟机server配置 location配置 ...
- freeRadius 基础配置及测试
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...
随机推荐
- log4j基础配置使用
添加log4j的jar包:可以从maven处下载:https://mvnrepository.com/artifact/log4j/log4j/1.2.17 <!-- https://mvnre ...
- Codeforces 1114C(数论)
题面 传送门 分析 我们先考虑n!在10进制下有多少个0 由于10=2*5, 我们考虑n!的分解式中5的指数,答案显然等于\(\frac{n}{5}+\frac{n}{5^2}+\frac{n}{5^ ...
- 【目录】sql server 性能调优
随笔分类 - sql server 性能调优 sql server 性能调优之 资源等待之网络I/O 摘要: 一.概述 与网络I/O相关的等待的主要是ASYNC_NETWORK_IO,是指当sql s ...
- windows10图形化连接CentOS7
前提:CentOS已经安装图形化,安装教程可以百度 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release (Core) 安装 ...
- Juqery插件编写 基础说明
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
- Nginx的应用之虚拟主机
开始前请确保selinux关闭,否则当配置完虚拟主机后,尽管权限或者网站目录都正确,访问的结果也是403 nginx的虚拟主机有三种方式: 一.基于域名的虚拟主机 (1)创建对应的web站点目录以及程 ...
- 西电源ubuntu12
deb http://linux.xidian.edu.cn/mirrors/ubuntu/ precise main restricted universe multiverse #deb-src ...
- 【leetcode】701. Insert into a Binary Search Tree
题目如下: Given the root node of a binary search tree (BST) and a value to be inserted into the tree, in ...
- 【2019 Multi-University Training Contest 1】
01:https://www.cnblogs.com/myx12345/p/11543105.html 02:https://www.cnblogs.com/myx12345/p/11439320.h ...
- SQL必知必会——插入数据(十五)
1.数据插入 INSERT用来将行插入(或添加)到数据库表.插入有几种方式: 插入完整的行插入行的一些部分插入某些查询的结果注意:1.使用INSERT语句可能需要客户端/服务端DBMS中的特定安全权限 ...