Babel是什么

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

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

webpack配置Babel

安装依赖包:

npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-env
  • babel-core:babel的核心包;
  • babel-loader:babel的loader包;
  • babel-preset-es2015:解析es6的包;
  • babel-preset-env:解析es6的包;(官方最新推荐)
  • babel-preset-react:解析React的JSX的包;

在webpack.config.js中配置babel:

module:{
rules:[
{
test:'/\.(js|jsx)$/',
use:{
loader:'babel-loader'
},
exclude:/node_module/
}
]
}

在根目录下建立.babelrc文件,虽然Babel可以直接在webpack.config.js中进行配置,但是考虑到babel具有非常多的配置选项,如果卸载webapck.config.js中会非常的雍长不可阅读,所以我们经常把配置卸载.babelrc文件里。

.babelrc

{
"presets":["env","react"]
}

参考地址:

webpack 3.X学习之Babel配置的更多相关文章

  1. Vue学习之Babel配置(十六)

    一.Babel:  (官网:https://www.babeljs.cn/docs/) 1.Babel 是一个 JavaScript 编译器: 2.Babel 是一个工具链,主要用于将 ECMAScr ...

  2. webpack 3.X学习之基本配置

    创建配置文件webpack.config.js 在根目录在手动创建webpack.config.js,配置基本模板 module.exports ={ entry:{}, output:{}, mod ...

  3. webpack中babel配置 --- runtime-transform和babel-pollfill

    webpack - babel配置 babel是一个javascript编译器,是前端开发中的一个利器.它突破了浏览器实现es标准的限制,使我们在开发中可以使用最新的javascript语法. 通过构 ...

  4. babel 配置探究及错误解析

    前面的文章说到了react 15的一些特性,众所周知react搭配es6或者叫es2015的开发模式更加的方便快捷.不过提到es2015这个毕竟没有被浏览器广泛支持的规范,要想能够快快乐乐的应用起来, ...

  5. 05.ElementUI源码学习:项目发布配置(github pages&npm package)

    0x00.前言 书接上文.项目第一个组件已经封装好,说明文档也已编写好.下面需要将说明文档发布到外网上,以此来展示和推广项目,使用 Github Pages功能实现.同时将组件发布之 npm 上,方便 ...

  6. webpack 1.x 学习总结

    webpack介绍(from github): A bundler for javascript and friends. Packs many modules into a few bundled ...

  7. webpack4.0 babel配置遇到的问题

    babel配置 babel版本升级到8.x之后发现出现了很多问题.首先需要安装 "@babel/core": "^7.1.2", "@babel/pl ...

  8. Babel 配置用法解析

    Babel 配置用法解析 刚复工的时候我司业务太多了,我已不记得我们连续作战了多少天,最近算是有时间可以学习学习我的babel大宝贝了,上周末看了下babel的一些核心模块以及babel的一些配置,今 ...

  9. haproxy学习之https配置

    haproxy学习之https配置   原文  http://www.cnblogs.com/ilanni/p/4941056.html   如何配置https,以及https在实际生产环境中的应用. ...

随机推荐

  1. vb6.0快速操作注册表函数大全(仅字符串KEY值部分)

    Option Explicit '声明要加载的函数 Private Declare Function RegCreateKey Lib "advapi32.dll" Alias & ...

  2. JavaEE 对象的串行化(Serialization)

    什么情况下需要序列化 a)当你想把的内存中的对象写入到硬盘的时候:b)当你想用套接字在网络上传送对象的时候:c)当你想通过RMI传输对象的时候:再稍微解释一下:a)比如说你的内存不够用了,那计算机就要 ...

  3. php实现伪静态的方法

    mod_rewrite是Apache的一个非常强大的功能,它可以实现伪静态页面.下面我详细说说它的使用方法 1.检测Apache是否支持mod_rewrite 通过php提供的phpinfo()函数查 ...

  4. 【ASP.NET MVC 学习笔记】- 03 Razor语法

    本文参考:http://www.cnblogs.com/willick/p/3224144.html 1.Razor语句以@开头. 2.每个View都有自己的Model属性,可通过@Model调用.语 ...

  5. php开发微信公众号获取信息LBS

    1.一般的公众号都可以在微信公众平台里面设置自定义菜单和自动回复消息,如果需要获取用户位置,则必须开启 服务器配置,当次功能开启后,微信公众平台的自定义菜单和自动回复则失效. 需要通过接口开发来实现微 ...

  6. LeetCode 31. Next Permutation (下一个排列)

    Implement next permutation, which rearranges numbers into the lexicographically next greater permuta ...

  7. 二、Tomcat配置以及IDEA运行第一个Jsp项目——JavaWeb点滴

    一.Tomcat配置环境变量 tomcat从官网下载最新的即可,本人下载的是安装版本.在安装过程中需要设置用户名和密码以及选择相应的JDK的安装目录.这些都比较简单直接下一步即可,安装完成之后就是配置 ...

  8. Xilinx ISE 14.1生成Rom内核并读取Rom中的数据

    <一>建立一个项目readDataFromRom 详细过程参照另一篇文章 http://www.cnblogs.com/LCCRNblog/p/3397666.html <二> ...

  9. Bridging signals(NlogN最长上升子序列)

    Bridging signals Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  10. javascript 之变量对象-09

    变量对象 变量对象:每个执行环境(执行上下文)都有一个对应的变量对象(variable object),环境中(执行上下文中)定义的所有变量.函数都保存在这个对象中. 在上篇中说到,当执行流执行一个函 ...