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等 ...
随机推荐
- 基于 HTML5 + WebGL 实现 3D 挖掘机系统
前言 在工业互联网以及物联网的影响下,人们对于机械的管理,机械的可视化,机械的操作可视化提出了更高的要求.如何在一个系统中完整的显示机械的运行情况,机械的运行轨迹,或者机械的机械动作显得尤为的重要,因 ...
- JVM初体验
一.设计堆内存溢出异常:OutOfMemoryError: public class Main { public static void main(String[] args) { List<D ...
- salesforce lightning零基础学习(十四) Toast 浅入浅出
本篇参考: https://developer.salesforce.com/docs/component-library/bundle/force:showToast/specification h ...
- HTMLTestRunner加入logging输出
使用HTMLTestRunner生成html的测试报告的时候,报告中只有console输出,logging的输出无法保存, 如果要在报告中加入每一个测试用例执行的logging信息,则需要改HTMLT ...
- 【集合系列】- 深入浅出分析Collection中的List接口
一.List简介 List 的数据结构就是一个序列,存储内容时直接在内存中开辟一块连续的空间,然后将空间地址与索引对应. 以下是List集合简易架构图 由图中的继承关系,可以知道,ArrayList. ...
- java多线程与线程并发一:线程基础回顾
本文章内容整理自:张孝祥_Java多线程与并发库高级应用视频教程 线程简单来讲就是程序正在做的事情.多线程即一个程序同时做多件事情,一个线程就是一件事情. 在java中创建线程的方法有两种. 方法一是 ...
- .NET后端知识汇总
C#.net系列后端知识点汇总(也有些许数据库.svn等),他山之石. 1..net相关技术:XML.webservice.SOAP,其中webservice使用三大技术:XML.SOAP.WSDL. ...
- Python项目开发公用方法--excel生成方法
在实际开发中,我们有时会遇到数据导出的需求.一般的,导出的文件格式为Excel形式. 那么,excel的生成就适合抽离出一个独立的公用方法来实现: def generate_excel(excel_n ...
- 判断DataGridView是否选中某行
if (this.Drawing_GridView.SelectedColumns.Count == 0)//判断是否选中某行 { }
- pip install xxx Could not fetch URL https://pypi.org/simple/pip/
Could not fetch URL https://pypi.org/simple/pip/: There was a problem confirmingthe ssl certificate: ...