(15/24) 为webpack增加babel支持
Babel
是什么?
Babel
是一个编译JavaScript
的平台,它的强大之处表现在可以通过编译达到以下目的:
使用下一代的javaScript代码(ES6,ES7….),即使这些标准目前并未被当前的浏览器完全支持。
使用基于JavaScript进行了扩展的语言,比如React的JSX。
1.如何让webpack支持babel呢?
Babel
其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack
可以把其不同的包整合在一起使用,对于每一个你需要的功能或拓展,你
都需要安装单独的包(用得最多的是解析ES6
的babel-preset-es2015
包和解析JSX
的babel-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支持的更多相关文章
- webpack快速入门——给webpack增加babel支持
1.Babel的安装与配置 Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个 你需要的功能或拓展,你都需要安 ...
- webpack配置:增加babel支持、打包后调试
一.babel支持 Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个你需要的功能或拓展,你都需要安装单独的包 ...
- 使用webpack、babel、react、antdesign配置单页面应用开发环境
这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- webpack 多页面支持 & 公共组件单独打包
webpack - 多页面/入口支持 & 公共组件单独打包 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 we ...
- 图像分辨率 像素 大小 LCD显示 为OLED屏增加GUI支持
1. 根据一张标准图片的分辨率,结合每个像素的大小,可以计算得到这张图片的大小(字节数) 补充点:bmp格式的图片有24色或者32色.(其一个像素点可能占用24bits或者32bits) 至于图片怎 ...
- [原创] Easy SysLite V1.2 (2016.5.29更新,新增加WIN10支持,一个程序适配所有系统减肥)
[原创] Easy SysLite V1.2 (2016.5.29更新,新增加WIN10支持,一个程序适配所有系统减肥) nohacks 发表于 2016-5-29 17:12:51 https:// ...
- Linux PHP增加JSON支持及如何使用JSON
Linux PHP增加JSON支持及如何使用JSON 目前,JSON已经成为最流行的数据交换格式之一,各大网站的API几乎都支持它. JSON(JavaScript Object Notation) ...
- 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 ...
- 为cocos2d-x项目增加Lua支持
开始为游戏增加Lua脚本支持,今天主要配置了一下开发环境:cocos2d-x 2.2.1,xcode5. 1. 创建cocos2d-x-lua项目 类似于创建C++项目,用以下命令即可: python ...
随机推荐
- Ubuntu终端及VI 快捷键
Ubuntu终端 快捷键 功能 Tab 自动补全 Ctrl+a 光标移动到开始位置 Ctrl+e 光标移动到最末尾 Ctrl+k 删除此处至末尾的所有内容 Ctrl+u 删除此处至开始的所有内容 Ct ...
- Codeforces1106F 【BSGS】【矩阵快速幂】【exgcd】
首先矩阵快速幂可以算出来第k项的指数,然后可以利用原根的性质,用bsgs和exgcd把答案解出来 #include<bits/stdc++.h> using namespace std; ...
- this的区别
数据中心:this与_this的区别 getSelectData:function(){ var _this=this; _this.queryAjax(URL.selectData,'','post ...
- mysql和redis加入到windows服务
mysql加入到windows服务: mysqld --install Mysql5.6 mysqld --remove mysql5.6 从windows的服务中删除mysql服务 net st ...
- FastAdmin 教程草稿大纲
FastAdmin 教程草稿大纲 计划 FastAdmin 教程大纲 FastAdmin 环境搭建 phpStudy 2018 安装 一键 CRUD 教程 环境变量配置 环境安装 命令行安装 列出所需 ...
- opencv mat flags含义
f:\opencv\opencv\sources\modules\core\src\matrix.cpp: flags = (_type & CV_MAT_TYPE_MASK) | MAGI ...
- 【转】每天一个linux命令(56):netstat命令
原文网址:http://www.cnblogs.com/peida/archive/2013/03/08/2949194.html netstat命令用于显示与IP.TCP.UDP和ICMP协议相关的 ...
- Oracle 存储过程发送邮件
CREATE OR REPLACE PROCEDURE PROCSENDEMAIL(P_TXT VARCHAR2, ...
- 二分查找算法,java实现
二分查找算法是在有序数组中用到的较为频繁的一种算法. 在未接触二分查找算法时,最通用的一种做法是,对数组进行遍历,跟每个元素进行比较,其时间复杂度为O(n),但二分查找算法则更优,因为其查找时间复杂度 ...
- opencv中的更通用的形态学
为了处理更为复杂的情况,opencv中还支持更多的形态学变换. 形态学名称 操作过程 操作名称 是否需要temp参数 开操作 open open(src)=先腐蚀,后膨胀 CV_MOP_OPEN 否 ...