Babel是什么?

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

使用下一代的javaScript代码(ES6,ES7….),即使这些标准目前并未被当前的浏览器完全支持。

使用基于JavaScript进行了扩展的语言,比如React的JSX。

1.如何让webpack支持babel呢?

Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个你需要的功能或拓展,你

都需要安装单独的包(用得最多的是解析ES6babel-preset-es2015包和解析JSXbabel-preset-react包)。

1.1.安装

一次性安装这些依赖包(也可以单独安装),此处使用cnpm安装(也可以使用npm安装):

cnpm  install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

--save-dev:表示将模块安装到项目目录下,并在package文件的devDependencies节点写入依赖。

此处注意版本兼容问题,若出现版本兼容问题,可先删除node_modules然后安装我此处使用的版本(删除node_modules后直接修改package.json中版本,然后使用npm install 即可(或cnpm install)):

cnpm  install --save-dev babel-core@6.26.3 babel-loader@7.1.4 babel-preset-es2015@6.24.1 babel-preset-react@6.24.1

1.2配置Babel

在webpack.fonfig.js中进行配置:

{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
options:{
presets:[
"es2015","react"
]
}
},
exclude:/node_modules/ //排除node_modules下面的包
}

1.3 修改entry.js中的js代码:

{
let test= 'Hello Webpack'
document.getElementById('title').innerHTML=test;
}

1.4 打包

上面的代码使用了ES6的let声明方法。如果不使用Babel来进行转换,我们打包出来的js代码没有作兼容处理,使用了Babel转换的代码是进行处理过的,转成了

es5的语法。

使用webpack命令进行打包

webpack

通过上述的配置,webpack其实已经支持babel,但是不是最好的选择,还可以进行优化。

2. .babelrc配置

虽然Babel可以直接在webpack.config.js中进行配置,但是考虑到babel具有非常多的配置选项,如果都写在webapck.config.js中会非常的雍长不利于阅读,

所以我们经常把配置写在.babelrc文件里。

2.1 新建.babelrc

在项目根目录新建.babelrc文件,并把配置写到文件里。

.babelrc:

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

此时的webpack.config.js文件里loader配置变为:

{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
},
exclude:/node_modules/
}

此时我们打包,效果与上面的一致。

通过.babelrc的配置,使babel相关配置与webpack.config.js分离开来,便于阅读与维护。但此时.babelrc配置文件里的相关配置信息有点落伍了,下面来学学新一

代的babel-preset。

3.ENV的使用

现在网络上已经不流行babel-preset-es2015,现在官方推荐使用的是babel-preset-env,为了不落伍我们就来学学ENV的相关知识:

3.1 插件下载(也可以使用cnpm)

npm  install --save-dev babel-preset-env

3.2 修改.babelrc里的配置文件

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

3.3 打包

此时我们再使用webpack命令进行打包,最终的打包结果也上述都一致。

对于在React中Babel的使用,如何解析JSX,会在后续继续学习,这里就算是先过过眼把。

有什么问题,欢迎关注并留言!!

(15/24) 为webpack增加babel支持的更多相关文章

  1. webpack快速入门——给webpack增加babel支持

    1.Babel的安装与配置 Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个 你需要的功能或拓展,你都需要安 ...

  2. webpack配置:增加babel支持、打包后调试

    一.babel支持 Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个你需要的功能或拓展,你都需要安装单独的包 ...

  3. 使用webpack、babel、react、antdesign配置单页面应用开发环境

    这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  4. webpack 多页面支持 & 公共组件单独打包

    webpack - 多页面/入口支持 & 公共组件单独打包 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 we ...

  5. 图像分辨率 像素 大小 LCD显示 为OLED屏增加GUI支持

    1. 根据一张标准图片的分辨率,结合每个像素的大小,可以计算得到这张图片的大小(字节数) 补充点:bmp格式的图片有24色或者32色.(其一个像素点可能占用24bits或者32bits)  至于图片怎 ...

  6. [原创] Easy SysLite V1.2 (2016.5.29更新,新增加WIN10支持,一个程序适配所有系统减肥)

    [原创] Easy SysLite V1.2 (2016.5.29更新,新增加WIN10支持,一个程序适配所有系统减肥) nohacks 发表于 2016-5-29 17:12:51 https:// ...

  7. Linux PHP增加JSON支持及如何使用JSON

    Linux PHP增加JSON支持及如何使用JSON 目前,JSON已经成为最流行的数据交换格式之一,各大网站的API几乎都支持它. JSON(JavaScript Object Notation)  ...

  8. openerp学习笔记 domain 增加扩展支持,例如支持 <field name="domain">[('type','=','get_user_ht_type()')]</field>

    示例代码1,ir_action_window.read : # -*- coding: utf-8 -*-from openerp.osv import fields,osv class res_us ...

  9. 为cocos2d-x项目增加Lua支持

    开始为游戏增加Lua脚本支持,今天主要配置了一下开发环境:cocos2d-x 2.2.1,xcode5. 1. 创建cocos2d-x-lua项目 类似于创建C++项目,用以下命令即可: python ...

随机推荐

  1. Ubuntu终端及VI 快捷键

    Ubuntu终端 快捷键 功能 Tab 自动补全 Ctrl+a 光标移动到开始位置 Ctrl+e 光标移动到最末尾 Ctrl+k 删除此处至末尾的所有内容 Ctrl+u 删除此处至开始的所有内容 Ct ...

  2. Codeforces1106F 【BSGS】【矩阵快速幂】【exgcd】

    首先矩阵快速幂可以算出来第k项的指数,然后可以利用原根的性质,用bsgs和exgcd把答案解出来 #include<bits/stdc++.h> using namespace std; ...

  3. this的区别

    数据中心:this与_this的区别 getSelectData:function(){ var _this=this; _this.queryAjax(URL.selectData,'','post ...

  4. mysql和redis加入到windows服务

    mysql加入到windows服务: mysqld --install  Mysql5.6 mysqld --remove mysql5.6  从windows的服务中删除mysql服务 net st ...

  5. FastAdmin 教程草稿大纲

    FastAdmin 教程草稿大纲 计划 FastAdmin 教程大纲 FastAdmin 环境搭建 phpStudy 2018 安装 一键 CRUD 教程 环境变量配置 环境安装 命令行安装 列出所需 ...

  6. opencv mat flags含义

    f:\opencv\opencv\sources\modules\core\src\matrix.cpp:  flags = (_type & CV_MAT_TYPE_MASK) | MAGI ...

  7. 【转】每天一个linux命令(56):netstat命令

    原文网址:http://www.cnblogs.com/peida/archive/2013/03/08/2949194.html netstat命令用于显示与IP.TCP.UDP和ICMP协议相关的 ...

  8. Oracle 存储过程发送邮件

    CREATE OR REPLACE PROCEDURE PROCSENDEMAIL(P_TXT       VARCHAR2,                                      ...

  9. 二分查找算法,java实现

    二分查找算法是在有序数组中用到的较为频繁的一种算法. 在未接触二分查找算法时,最通用的一种做法是,对数组进行遍历,跟每个元素进行比较,其时间复杂度为O(n),但二分查找算法则更优,因为其查找时间复杂度 ...

  10. opencv中的更通用的形态学

    为了处理更为复杂的情况,opencv中还支持更多的形态学变换. 形态学名称 操作过程 操作名称 是否需要temp参数 开操作 open open(src)=先腐蚀,后膨胀  CV_MOP_OPEN 否 ...