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(

  安装成功后,devDependencies(依赖)会出现一个"babel-preset-env": "^1.7.0"

5,在package.json中配置babel ,转译规则需要安装依赖 
  (npm install --save-dev babel-preset-es2015)

 

6,在命令行中调用babel,在package.json 中添加

 

7,编译es6代码,新建连个文件夹src 和 lib ,因为我们上面命令用的是 babel src -d lib,然后运行编译命令npm run build   就可以看到src 下面的文件被全部编译对应的放在lib文件夹下面,需要使用直接引入lib文件夹下面对应的文件

在项目中ES6语法转ES5语法 babel转码器的更多相关文章

  1. ES6转ES5(Babel转码器)

    ES6转ES5(Babel转码器) 前提:必须在VScode中已经安装了Node.js 官网:https://nodejs.org/en/ 一.安装命令行转码工具 npm install --glob ...

  2. Babel 转码器 § es6转换es5

    Babel 转码器 § es6转换es5 实时转码 /  Repl  -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc ...

  3. ES6标准简介之Babel转码器解说

    ES6是ECMAScript 6的简称,是JavaScript语言的下一代标准,现在基于jquery库的前端开发js所使用的标准是ES5(ECMAScript 5).ES6已于2015年6月正式发布. ...

  4. ES6入门一:ES6简介及Babel转码器

    ES6简介 Babel转码器 Nodejs中使用ES6 WebPack中使用ES6及Babel转码插件 一.ES6简介与转码  1.1一个常见的问题,ECMAScript和JavaScript到底是什 ...

  5. 使用babel转码器,让浏览器支持es6语法

    ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,可是很多浏览器并不支持es6语法,所以我们需要一个转码工具, 把es6的语法转换成浏览器支持的javascr ...

  6. es6 babel转码器安装配置及常见命令

    示例:在d盘,新建文件夹es6,文件夹里新建一个文件es6.js. (1)先全局安装babel-cli,输入命令npm install babel-cli -g (2)输入d:( 进入d盘),再输入c ...

  7. 记项目中ES6+gulp+angularjs里的问题

    AngualrJs中可用来注入的有三种类型,service.factory.provider,这三种写法不样,用法也都不一样.其中,service只实例化一次,其实就是单例模式的思想.无论我们在什么地 ...

  8. webpackES6语法转ES5语法

    安装babel-loader: npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 webpack.config. ...

  9. Vue项目中遇到的问题汇总

    一.打包后的打开index.html页面空白的几种情况: 引入的css.js路径报错,此时解决方法:把vue.config.js中的增加publicPath: ‘./’ 或者把原来的baseUrl改为 ...

随机推荐

  1. springcloud--ribbo(负载均衡)

    ribbo:是Netflix公司开源的一个负载均衡的项目,是一个客户端负载均衡器,运行在客户端上. 实际运用案例(基于springcloud入门案例): 一.新建Module:springcloud- ...

  2. JQuery 动画实现

    $(this.div_wrong).show().css({width:"0px", height:"0px"})    .animate({width:&qu ...

  3. 九十一、SAP中ALV事件之五,查看状态栏,工具栏和功能键等

    一.我们按照说明,来到SE37功能模块,然后点击[转到]->[函数组]->[显示组] 二.按照说明输入SALV,点击勾选 三.点击主程序 四.点击主程序后,我们来到函数组页面,然后 五.我 ...

  4. 最小生成树(Kruskal+Prim)--模板

    最小生成树-----在连通网的所有生成树中,所有边的代价和最小的生成树,称为最小生成树. 应用场景 1.假设以下情景,有一块木板,板上钉上了一些钉子,这些钉子可以由一些细绳连接起来.假设每个钉子可以通 ...

  5. mysql 分组查询教程

    1.分组 分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理. 2.分组的特点 1.)group by的含义:将查询结果按照1个或多个字段进行分组,字段值相同的为一组 ...

  6. PHP基础(9.27 第十三天)

    什么是PHP,为什么要学习PHP:  (1)php是嵌入html页面中的脚本语言   (2)目前最流行的网站开发语言  (3)在几乎所有平台中都可以运行  (4)很多企业都在使用PHP作为开发语言 P ...

  7. Codeforces 392 B Blown Garland

    题意:输入是由连续的RYGB和字符!组成的字符串,R代表红灯,Y代表黄灯,G代表绿灯,B代表蓝灯.简而言之,就是给定的字符串保证了下标对4取余相同的灯颜色都相同,但是有的地方为‘!’代表这个灯坏了,然 ...

  8. DataStructuresAndAlogorithm--红黑树

    简介 为了理解红黑树(red-black tree)是什么,首先需要知道二叉树. 定义1:二叉树是结点的有限集合,该集合或者为空集,或者是由一个根和两棵互不相交的,称为该根的左子树和右子树的二叉树组成 ...

  9. Struts1 的配置文件总结

    一.在web.xml中安装Struts 要想使用Struts,我们接触到的第一个配置文件就是web.xml.实际上,Struts的入口点是一个名为ActionServlet的Servlet.在第一次访 ...

  10. nginx报错

    1. nginx报错 nginx: [error] invalid PID number "" in "/usr/local/nginx/logs/nginx.pid&q ...