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这个毕竟没有被浏览器广泛支持的规范,要想能够快快乐乐的应用起来, ...
随机推荐
- 【Multiply Strings】cpp
题目: Given two numbers represented as strings, return multiplication of the numbers as a string. Note ...
- HTML5新增属性学习笔记
1.form属性 表单内的从属元素,可以写在表单外部.可以通过指定元素的form属性来声明元素所属表单.form的属性值为表单的id. <form id="testForm" ...
- URAL 1684. Jack's Last Word ( KMP next函数应用 )
题意:问第二行的串能不能恰好分割成几个串,使得这几个串都是第一行串的前缀.如果是,输出No, 并输出这几个串,否则输出Yes. 这题是Special Judge,把两个串连接起来,中间用一个未出现过的 ...
- 第一次软件工程作业补充plus
一.代码的coding地址:coding地址. 二.<构建之法>读后问题以及感言(补充): 1.对于7.3MSF团队模型,7.2.6保持敏捷,预期和适应变化,中的"我们是预期变化 ...
- HTML5应用:setCustomValidity(message)接口
本文转自http://tid.tenpay.com/?p=3592 HTML5表单验证给前端人员带来了便利,但是在用户体验上存在一些缺陷,默认的提示对用户很不友好,无法准确的获取想要的信息.好在大牛们 ...
- GDI+实现双缓冲绘图方法一
private void Form5_MouseMove(object sender, MouseEventArgs e) { int intOX = rectDrawArea.X; int intO ...
- nginx的入门到框架设计
mac上安装nginx 安装与启动 安装 brew install nginx 命令 通过 Homebrew 下载的软件默认位置在 /usr/local/Cellar 应该ln-s 加连接就能全局 n ...
- easyui中datagrid空数据集不刷新的解决方式
datagrid空间可以异步请求json数据,并将新数据覆盖原有数据,重绘数据表. 但是当回来空数据集的时候,js会产生这样一条错误: TypeError: rows is null for(var ...
- POJ3345 Bribing FIPA 【背包类树形dp】
题目链接 POJ 题解 背包树形dp板题 就是读入有点无聊,浪费了很多青春 #include<iostream> #include<cstdio> #include<cm ...
- Tomcat学习笔记(七)
Tomcat载入器(一) 在了解tomcat的载入器时,首先需要了解的是java的类加载部分的内容. 在java体系中,系统分为3中类型的加载器 1.启动类加载器(Bootstrap ClassLoa ...