es6 babel编译
本文主要参照阮一峰的es6入门,为提高自己写了一份随笔。
原文地址请戳这里 ECMAScript 6 入门
ECMAScript 6是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。
但是目前浏览器对es6不完全兼容,需要借住babel编译。
Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
node 安装babel ;
$ npm install --save-dev babel-preset-es2015
配置 .babelrc文件在目录下。
该文件用来设置转码规则和插件,基本格式如下。
{"presets": [], "plugins": [] }
presets
字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015 # react转码规则 $ npm install --save-dev babel-preset-react # ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个 $ npm install --save-dev babel-preset-stage-0 $ npm install --save-dev babel-preset-stage-1 $ npm install --save-dev babel-preset-stage-2 $ npm install --save-dev babel-preset-stage-3
然后,将这些规则加入.babelrc
。
{"presets": [ "es2015", "react", "stage-2" ], "plugins": [] }
命令行转码babel-cli
Babel提供babel-cli
工具,用于命令行转码。
$ npm install --global babel-cli //在全局安装
$ npm install --save-dev babel-cli //在项目中安装然后初始化项目$npm init 配置一些基本的参数。
{// ..."devDependencies": { //开发依赖"babel-cli": "^6.0.0"},"scripts": { "build": "babel src -d lib" //src下面的js文件,转码到lib文件下。 }, }
然后执行
$ npm run build
或者执行常用的命令行。
# 转码结果输出到标准输出 $ babel example.js# 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 $ babel example.js --out-file compiled.js # 或者 $ babel example.js -o compiled.js# 整个目录转码 # --out-dir 或 -d 参数指定输出目录 $ babel src --out-dir lib # 或者 $ babel src -d lib# -s 参数生成source map文件 $ babel src -d lib -s
babel-register
babel-register
模块改写require
命令,为它加上一个钩子。此后,每当使用require
加载.js
、.jsx
、.es
和.es6
后缀名的文件,就会先用Babel进行转码。
$ npm install --save-dev babel-register
使用时,必须首先加载
babel-register。
require("babel-register");
require("./index.js");
然后,就不需要手动对index.js
转码了。
需要注意的是babel-register
只会对require
命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用。
转载于:https://www.cnblogs.com/xiamer/p/5724450.html
es6 babel编译相关推荐
- 使用babel编译es6
起因:开发中慢慢的学习使用es6,但是JavaScript需要浏览器来解析,而不是所有浏览器都支持es6,所以为了兼容es6,需要第三方工具进行编译es6. 工具:node,gulp,gulp-bab ...
- 前端学习笔记之 ES6之Module模块与Babel编译(十三)
文章目录 Module 初识Module Module的基本用法 Module的导入和导出 export default export Module的注意事项 Module的应用 总结 Babel和W ...
- nodejs下babel编译es6后异常定位助手:source-map-support
为什么80%的码农都做不了架构师?>>> 使用es6甚至es7写代码是愉快的,然而由于兼容性原因,我们不得不使用babel把es6代码转成es5的,但这样会有一个问题,那就是出 ...
- babel 编译vue_如何对代码进行未来验证:使用Babel polyfills编译JavaScript VS
babel 编译vue A compiler like Babel will almost certainly be a foundational tool in building JavaScrip ...
- es6 babel转码器安装配置
es6 babel转码器安装配置 例如:桌面上新建个文件夹es6,文件夹里新建一个文件es6.js. 打开小黑窗进入文件夹.(windows要以管理员的方式打开cmd) 1.先全局安装babel-cl ...
- html中babel编译vue,vue-cli中的babel配置文件.babelrc实例详解
本文介绍vue-cli脚手架工具根目录的babelrc配置文件 介绍 es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码 ba ...
- es6 Babel 转码器对修饰器的支持
Babel 转码器对修饰器的支持 目前,Babel 转码器已经支持 Decorator. 首先,安装babel-core和babel-plugin-transform-decorators.由于后者包 ...
- ES6中的class是如何实现的?(附Babel编译的ES5代码详解)
序言 这篇文章主要讲解面试某大厂遇到的一个问题 - ES6中的class语法的实现? ECMAScript 6 实现了class,class是一个语法糖,使得js的编码更清晰.更人性化.风格更接近面向 ...
- es6 babel转码器使用
2019独角兽企业重金招聘Python工程师标准>>> (1)先全局安装babel-cli,输入命令cnpm install babel-cli -g (2) 进入项目目录npm i ...
- 一文读懂babel编译流程,再也不怕面试官的刁难了
前言 Babel 是一个强大的 js 编译器.有了 Babel, 我们可以放肆的使用 js 的新特性,而不用考虑浏览器兼容性问题.不仅如此,基于 babel 体系,我们可以通过插件的方法修改一些语法, ...
最新文章
- bert模型图解 很详细的与其他模型对比实验
- 本地数据jqGrid分页
- 为什么启动hbase shell后,创建按create 'test', 'cf'失败?
- adb 启动命令,pc启动两个微信,INSTALL_FAILED_CONFLICTING_PROVIDER
- Vue-cli 自定义配置
- EDA技术实用教程 | 复习四 | 标识符、关键字和规范的书写格式
- android office转pdf插件,office word转pdf插件-Office自带Word转PDF插件下载__飞翔下载
- .net core 集成skywalking
- 计算机sci检索,计算机方向国内EI检索、SCI检索的期刊目录
- 技术的共通性—从姿态估计到自动驾驶
- 国庆假期看了一系列图像分割Unet、DeepLabv3+改进期刊论文,总结了一些改进创新的技巧
- wp文件转shp_ArcGIS教程:MapGIS转换shp攻略
- ## GEE Landsat8 Collection2 level2 数据集 计算LST地表温度
- 56个JavaScript 实用工具函数助你提升开发效率!
- crazy的比较级最高级_形容词比较级和最高级more, most
- 论文解读(NWR)《Graph Auto-Encoder via Neighborhood Wasserstein Reconstruction》
- 什么是大数据(个人理解)
- phpstorm使用教程
- 大数据存储的基础理解
- Windows下安装CgyWin和Hadoop