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. 图片字节流生成bmp文件

    1 BITMAPFILEHEADER bfh;//文件头 2 bfh.bfType=0x4d42; bfh.bfOffBits=sizeof(bfh)+sizeof(BITMAPINFOHEADER) ...

  2. python接口自动化26-发xml格式post请求《转载》

    python接口自动化26-发xml格式post请求 https://cloud.tencent.com/developer/article/1164987

  3. oracle查询SQL优化相当重要

    如果表中的时间字段是索引,那么时间字段不要使用函数,函数会使索引失效. 例如: select * from mytable where trunc(createtime)=trunc(sysdate) ...

  4. [JZOI]1251.收费站[二分][最短路]

    Description 在某个遥远的国家里,有n个城市.编号为1,2,3,--,n. 这个国家的政府修建了m条双向的公路.每条公路连接着两个城市.沿着某条公路,开车从一个城市到另一个城市,需要花费一定 ...

  5. PHP开发-模板的使用

    通过今天晚上半个多小时的赵老师对模板的介绍,大致对模板的使用.结构以及开发模板的思想有了个大致的了解. 为什么要开发模板:模板就是将PHP发过过程中使用到.需要操作的事物封装成对象.以便在使用到的时候 ...

  6. POJ 1770 树形DP

    咋一看确实想到的是树形DP,但是我一开始也马上想到环的情况,这样应该是不可以进行树形DP的,然后我自以为是地想用有向图代替无向图,而且总是从能量高的指向能量低的,这样自以为消除了环,但是其实是不对滴, ...

  7. 解决Java POI 导出Excel时文件名中文乱码,兼容浏览器

    String agent = request.getHeader("USER-AGENT").toLowerCase(); response.setContentType(&quo ...

  8. phi

    给定 \(T\) 个正整数 \(n\) ,对于每个 \(n\) ,输出做小的 \(m\) ,使得 \(\phi (m)\ge n\). 思路1:搞个线性欧拉函数筛,后缀最大值,二分查找 思路2:直接求 ...

  9. 通过while循环一步步实现九九乘法表

    # 打印#做出@列的效果height = int(input("height: ")) #用户输入一个高度 num_height = heightwhile num_height ...

  10. 一、CI框架(CodeIgniter)简介

    CI是一个非常好用,非常灵活的PHP框架,在官网https://codeigniter.org.cn/ :最新版本3.1.10 版 就可以尽情使用了. 不忘初心,如果您认为这篇文章有价值,认同作者的付 ...