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. javacv 通过rtsp 获取视频流 设置帧率

    原文章:https://blog.csdn.net/eguid_1/article/details/52680802 原代码: /** * 按帧录制视频 * * @param inputFile-该地 ...

  2. tomcat启动报错The JRE could not be found.Edit the server and change the JRE location

    解决: 在Windows->Preferences->Server->Runtime Environments 选择Tomcat->Edit,在jre中选择相应的jdk版本,完 ...

  3. 对plotTree的解释

    1.>>>a = 1/2/2   >>>a >>>0.25 2.def plotMidText(cntrPt,parentPt,txtString ...

  4. STL--迭代器设计原则和萃取机制(Traits)

    title: C++ STL迭代器设计原则和萃取机制(Traits) date: 2019-12-23 15:21:47 tags: STL C/C++ categories: STL 迭代器 (it ...

  5. 061-PHP函数定义默认参数

    <?php function add($x=2,$y=3){ //定义函数并设置默认参数 return $x+$y; } echo add(); //不传入参数调用add函数add(2,3) e ...

  6. Idea 打印GC

    设置 Run ⇒ Edit Configurations ⇒ VM options 添加 -XX:+PrintGCDetails 运行程序后会在末尾打印GC信息 2019-11-02 13:07:47 ...

  7. 图床工具PicGO实现七牛云图片上传

    图床工具PicGO实现七牛云图片上传 我们在写博客或者网络文章时经常需要上传图片.目前最有名气的图床工具就是PicGO. 简单的界面,完整的功能,在相册里也能直接复制markdown图片链接.一直深受 ...

  8. 将已有微信小程序转换为多端应用

    文档地址 https://nervjs.github.io/taro/

  9. nginx报错

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

  10. php添加openssl扩展

    很多时候都会用到openssl组件,下面就介绍一下linux下php安装openssl扩展: 安 装openssl组件,一般php安装目录中都有许多扩展组件的安装包,当然也包括openssl,例如我的 ...