详解webpack babel的配置


Posted in Javascript onJanuary 09, 2018

Babel是什么

Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到:

  1. 使用下一代的javascript(ES6,ES7,……)代码,即使当前浏览器没有完成支持;
  2. 使用基于JavvScript进行扩展语言,比如React的JSX;

npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D

关于babel的使用

首先 babel-preset-es2015 已经废弃,你可以使用 babel-preset-env 来代替它,后者比前者更好的更方便,这里不在赘述。

babel-polyfill VS babel-runtime VS babel-plugin-transform-runtime

  1. 首先 babel-polyfill 是对所有的API进行全局设置。并且会污染全局变量。
  2. babel-runtime 需要对你需要的API,如:Object.assign()。会先require()
  3. babel-plugin-transform-runtime 最推荐。它不需要require()也不会全局污染,并且,更厉害的是它是按需打包,全自动。

开始

/**** webpack.config.js ****/
// 在规则中增加
{
  test: /\.js$/,
  use: 'babel-loader',
  // 只处理src目录下面的。
  // 你也可以配置一条规则处理node_modules下面的。
  // 我记得swiper不知道哪一版本的直接把原来为编译的es6的语法塞给我,导致浏览器不兼容。
  include:[resolve('../src')]
}
/**** .babelrc ****/
// presets字段设定转码规则
{
 "presets": [
  ["env", {
   "modules": false,
   // 需要支持的环境,可选入: chrome, edge, 也可以node:6.5 ,node:current......
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "stage-2"
 ],
 // babel-transform-plugin转码预设不起作用的内容如:Object.assign()等等
 "plugins": ["transform-runtime"]
}

presets能够解决哪些语法。 package

babel-plugin-transform-runtime能够解决哪些语法。 package

其他。 更多 

最后:babel看上去好像要配置很多,其实经过官方的一顿简化之后需要的并没有那么繁琐。

github

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
jquery radio 操作代码
Mar 16 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 #Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 #Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 #Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 #Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 #Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 #Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 #Javascript
You might like
PHP 中执行系统外部命令
2006/10/09 PHP
php学习笔记 数组的常用函数
2011/06/13 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
js实现水平滚动菜单导航
2017/07/21 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
python通过文件头判断文件类型
2015/10/30 Python
python中实现控制小数点位数的方法
2019/01/24 Python
Python3最长回文子串算法示例
2019/03/04 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
附答案的Java面试题
2012/11/19 面试题
2015年路政工作总结
2015/05/22 职场文书
学校安全管理制度
2015/08/06 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS