es6 babel 安装以及使用
1,安装好node(需要使用npm包管理工具)
2,在本地项目路径下npm init,格式化成功后会在项目下生成一个配置文件package.json
3,本地安装bable npm install --save-dev babel-cli (如需卸载之前的babel使用命令 npm uninstall --global babel-cli),
安装成功后,devDependencies(依赖)会出现一个"babel-cli": "^6.26.0"(命令行工具,这一步还只能使用命令行工具,并不能进行转译),
4,安装转译依赖 npm install --save-dev babel-preset-env(
"babel-preset-env": "^1.7.0"安装成功后,devDependencies(依赖)会出现一个
5,在package.json中配置babel ,转译规则需要安装依赖
(npm install --save-dev babel-preset-es2015)
{
"name": "es6-babel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d lib"
},
//添加babel配置
"babel":{
//presets 定义转译规则
"presets":["es2015"]
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1"
}
}
6,在命令行中调用babel,在package.json 中添加
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d lib" //把src 下面的所有文件 转译放到lib 文件下面
},
7,编译es6代码,新建连个文件夹src 和 lib ,因为我们上面命令用的是 babel src -d lib,然后运行编译命令npm run build 就可以看到src 下面的文件被全部编译对应的放在lib文件夹下面,需要使用直接引入lib文件夹下面对应的文件
es6 babel 安装以及使用的更多相关文章
- babel安装
大家都知道目前ES6不是浏览器全部都是支持的,所以要通过转码器先进行转码然后再编译代码.小心在学习ES6之前先安装了babel转码器,虽然当时安装的时候困难重重,遗憾的是没有把解决方案总结一下,别人询 ...
- es6 babel转码器安装配置及常见命令
示例:在d盘,新建文件夹es6,文件夹里新建一个文件es6.js. (1)先全局安装babel-cli,输入命令npm install babel-cli -g (2)输入d:( 进入d盘),再输入c ...
- Babel安装在本地并用webstrom由ES6转Es5
1进入到根目录 2安装babel npm install babel-cli --save-dev 3安装其他库 npm install --save-dev babel-preset-env 4创 ...
- 在webstrorm中配置好es6 babel
第一步,新建一个项目,我这里建立了基于express 的node项目 第二步:将JavaScript语言版本切换为ECMAScript6 点击File —>settings,弹出设置框.把js的 ...
- Babel 安装教程
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持.下面是一个例子. // 转码前 inpu ...
- es6 babel编译
本文主要参照阮一峰的es6入门,为提高自己写了一份随笔. 原文地址请戳这里 ECMAScript 6 入门 ECMAScript 6是JavaScript语言的下一代标准.因为当前版本的ES6是在2 ...
- ES6 Babel 简单使用
ECMAScript 是 JS 的语言标准.而 ES6 是新的 JS 语法标准. PS:严格来说,ECMAScript 还包括其他很多语言的语言标准. ECMAScript 发展历史 1995年:EC ...
- ES6 - Babel编译环境搭建
都看到这里了,我就不写什么node环境安装之类的了. 直接从新建项目文件夹后开始吧! 安装依赖: 命令行cd到项目文件夹之后,执行以下命令:(mac记得前边加sudo) npm init –y // ...
- es6 ---- babel
babel-polyfill是ES6的补丁,由于babel只支持ES6语法部分的编译,对于新增的类我们还需要安装额外的polyfill,虽然现在Chrome和Firefox都已经添加了Promise等 ...
随机推荐
- 使用Samba服务实现Linux与Windows系统之间的文件共享
使用Samba服务口令验证方式可以让共享文件更加的安全,做到仅让信任的用户访问,而且验证过程也很简单,要想使用口令验证模式,我们需要先需要创建Samba服务独立的数据库. 第一步:安装Samba服务软 ...
- 5种常见Bean映射工具的性能比对
本文由 JavaGuide 翻译自 https://www.baeldung.com/java-performance-mapping-frameworks .转载请注明原文地址以及翻译作者. 1. ...
- 结合参数接收响应转换原理讲解SpringBoot常用注解
一.常用注解回顾 1.1 @RequestBody与@ResponseBody //注意并不要求@RequestBody与@ResponseBody成对使用. public @ResponseBody ...
- T-SQL, Part II: IMAGE/TEXT Insert
To insert data to IMAGE/TEXT (both keywords are recommend to replace with nvarbinary(MAX)/nvarchar(M ...
- [LC]35题 Search Insert Position (搜索插入位置)
①英文题目 Given a sorted array and a target value, return the index if the target is found. If not, retu ...
- ESP8266 使用AT指令
ESP8266 使用AT指令 问题:串口调试工具输入AT指令没返回结果 分析板子有两种模式 下载模式(默认) 运行模式 解决办法: 方法一:按下板子上的 RST 键位 方法二:使用 [安信可串口调试工 ...
- vue动态样式设置
思路: 通过 v-bind:class="true ? style1 : style2 " 配合三元表达式完成样式的切换 具体实现 //return设置控制的参数 //有多个需要样 ...
- 使用OpenMP加快OpenCV图像处理性能 | speed up opencv image processing with openmp
本文首发于个人博客https://kezunlin.me/post/7a6ba82e/,欢迎阅读! speed up opencv image processing with openmp Serie ...
- (三十八)golang--json(对切片、map、结构体进行序列化)
JSON(javascript object notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成.key-val JSON是在2001年开始推广的数据格式,目前已 ...
- Java Web登录界面
非常激动的开通了我的第一个博客,在这里希望大家能多多指点,相互学习. 一个简单的登录界面 首先我们先把这个登录分为三块: 一.数据库 数据库我用的是MYSQL: 二.前端 三.后台 1. 后台代码的 ...