Babel的配置和使用
自从 Babel
由版本5升级到版本6后,在安装和使用方式上与之前大相径庭,于是写了这篇入坑须知,以免被新版本所坑。
坑一:本地安装和全局安装
全局安装只需:
$ npm install --global babel-cli
这时候我们可以使用 Babel
命令编译文件:
$ babel index.js --out-file compiled.js
#或
$ babel index.js -o compiled.js
编译目录:
$ babel src -out-dir lib
#或
babel src -d lib
但是,官方推荐本地安装,是这么说的:
While you can install Babel CLI globally on your machine, it’s much better to install it locally project by project.
There are two primary reasons for this.
Different projects on the same machine can depend on different versions of Babel allowing you to update one at a time.
- It means you do not have an implicit dependency on the environment you are working in. Making your project far more portable and easier to setup.
大致的意思就是:可移植性较好并且没有依赖。
本地安装,记在项目的根目录下:
$ npm install --save-dev babel-cli
但是在本地就不能用 babel
命令了,我们可以在 package.json
文件中添加点东西:
{
"script": {
"build": "babel src -d lib"
}
}
然后,运行 npm run build
即可把 src
目录编译输出到 lib
坑二: 编译插件
上述编译其实并没有进行,而是原样输出。这是因为我们没有安装相应的插件,官方提示我们需要安装 babel-reset-es2015
插件:
$ npm install --save-dev babel-preset-es2015
然后,在根目录创建一个名为 .babelrc
的文件,里面配置如下内容:
{
"presets": [
"es2015"
]
}
同理,可以设置 React
的编译插件:
$ npm install --save-dev babel-preset-react
.babelrc
文件里即:
{
"presets": [
"es2015",
"react"
]
}
坑三: babel-polyfill插件
Babel
默认只转换新的JavaScript
句法(syntax
),而不转换新的API
,比如Iterator
、Generator
、Set
、Maps
、Proxy
、Reflect
、Symbol
、Promise
等全局对象,以及一些定义在全局对象上的方法(比如Object.assign
)都不会转码。Babel
默认不转码的API
非常多,详细清单可以查看 definitions.js 文件
为了完整使用 ES6
的 API
,我们只能安装这个插件:
$ npm install -save-dev babel-polyfill
然后,在需要使用的文件的顶部引入
import "babel-polyfill"
node.js
中:
require('babel-polyfill');
webpack.config.js
中:
module.exports = {
entry: ['babel-polyfill', './app/js']
}
Babel的配置和使用的更多相关文章
- webpack基础以及webpack中babel的配置
webpack 安装 npm 初始化,控制台输入 npm init -y webpack 安装 npm i webpack webpack-cli -D 新建 webpack.config.js co ...
- Babel 6 配置
Babel 6 较之前版本有些变化,几个比较重要的点. npm package babel 已经不在使用了,分成了下列几个 package babel-cli, 适用于命令行 babel-core, ...
- babel,webpack-dev-server配置
github仓库:https://github.com/llcMite/webpack.git 1.什么是webpack? webpack可以看做是模块打包机:它做的事情是,将静态资源当成模块打包成一 ...
- webpack4 自学笔记一(babel的配置)
所有代码都可以再我的github上查看,每个文件夹下都会有README.md,欢迎star: https://github.com/Jasonwang911/webpackStudyInit/tree ...
- 17 webpack中babel的配置
在webpack中,默认只能处理一部分ES6的新语法,一些更高级的ES6语法或者ES7语法, webpack是处理不了的:这时候,就需要借助于第三方的loader,来帮助webpack处理这些高级的语 ...
- babel基础配置
babel是干什么的 es6语法已经出来很多年,但各家游览器对es6的支持各不相同.为了解决这个问题,babel应运而生. babel支持把es6语法编译成es5,完全兼容各家游览器,避免兼容性问题出 ...
- 17 webpack中babel的配置——静态属性与实例属性
// class关键字,是ES6中提供的新语法,是用来实现ES6中面向对象编程的方式 class Person{ // 使用static关键字,可以定义静态属性 // 所谓的静态属性,就是可以直接通过 ...
- 最简单的babel+webpack配置
首先先介绍一下2个重要的库:core-js 和 regenerator core-js core-js 是用于 JavaScript 的组合式标准化库,它包含 es5 (e.g: object.fre ...
- babel 配置探究及错误解析
前面的文章说到了react 15的一些特性,众所周知react搭配es6或者叫es2015的开发模式更加的方便快捷.不过提到es2015这个毕竟没有被浏览器广泛支持的规范,要想能够快快乐乐的应用起来, ...
随机推荐
- swift中的正则表达式
swift中的t正则表达式 正则表达式是对字符串操作的一种逻辑公式,用事先定义好的一些特定字符.及这些特定字符的组合,组成一个"规则字符串",这个"规则字符串" ...
- ES6常用片段
promise: --在return里面: methods:{ getSellData(){ return axios.get('/api/seller').then((res=>{ retur ...
- c++知识点总结--静态与动态联编
静态联编是指在编译阶段就将函数实现和函数调用关联起来,因此静态联编也叫早绑定,在编译阶段就必须了解所有的函数或模块执行所需要检测的信息,它对函数的选择是基于指向对象的指针(或者引用)的类型 动态联 ...
- redis各种数据结构使用场景
一.redis 数据结构使用场景 原来看过 redisbook 这本书,对 redis 的基本功能都已经熟悉了,从上周开始看 redis 的源码.目前目标是吃透 redis 的数据结构.我们都知道,在 ...
- 网络namespace
sduo sysctl -w net.ipv4.conf.all.forwarding=1 sudo iptables -t nat -A POSTROUTING -s 172.18.0.0/24 ...
- Spring 事件机制
通过模拟邮件的发送,说明Spring的事件监听机制 事件类 package org.zln.module_chapter2.event; import org.springframework.cont ...
- [洛谷P3805]【模板】manacher算法
题目大意:给你一个字符串,求出它的最长回文字段 题解:$manacher$算法 卡点:$p$数组未开两倍空间 C++ Code: #include <cstdio> #include &l ...
- bigdecimal的使用
BigDecimal 由任意精度的整数非标度值 和 32 位的整数标度 (scale) 组成.如果为零或正数,则标度是小数点后的位数.如果为负数,则将该数的非标度值乘以 10 的负 scale 次幂. ...
- win7用户账户自动登录方法
为了计算机安全,相信使用Windows7系统的朋友大多都为自己的用户账户设置了或简单或复杂的密码,其实对于个人电脑来说,开机登录输入密码有时候会显得累赘,毕竟用户账户密码不仅仅是为了防止他人登录. 那 ...
- nginx tomcat负载均衡 使用redis session共享
环境准备 1.准备一台nginx服务器 ip192.168.1.133 端口81 安装过程: #首先安装依赖: yum -y install gcc-c++ yum -y install pcre p ...