详解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 相关文章推荐
jquery animate 动画效果使用说明
Nov 04 Javascript
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
javascript中indexOf技术详解
May 07 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 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中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
会计出纳员的自我评价
2014/01/15 职场文书
公司股权转让协议书
2014/04/12 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
python 管理系统实现mysql交互的示例代码
2021/12/06 Python
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫
SQL Server中锁的用法
2022/05/20 SQL Server