详解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 相关文章推荐
用javascript实现给图片加链接
Aug 15 Javascript
js计算页面刷新的次数
Jul 20 Javascript
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
使用原生javascript开发计算器实例代码
Feb 21 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获取文件相对路径的方法
2015/02/26 PHP
php二维码生成
2015/10/19 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
utf8的编码算法 转载
2006/12/27 Javascript
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
Python的ORM框架SQLObject入门实例
2014/04/28 Python
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
MYSQL支持事务吗
2013/08/09 面试题
大学生饮食配送创业计划书
2014/01/04 职场文书
干部行政关系介绍信
2014/01/17 职场文书
模具专业自荐信
2014/05/29 职场文书
安全例会汇报材料
2014/08/23 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
吴仁宝观后感
2015/06/09 职场文书
雷锋电影观后感
2015/06/10 职场文书