1、安装babel-cli

npm i babel-cli -D

2、实现npm的初始化

npm init -y

3、配置package.json

{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d lib" //src 表示需要转换的文件夹,lib表示转换后的目标文件夹
},
"keywords": [],
"author": "",
"license": "ISC"
}

4、安装版本文件

npm i babel-preset-env -D

5、创建 .babelrc 配置文件

{
"presets": ["env"]
}

6、实现转换

npm run build

babel-cli 的使用的更多相关文章

  1. 使用 Babel + React + Webpack 搭建 Web 应用

    话不说直接上正题. 环境搭建 Babel--目前浏览器对于ES6的语法解析支持度还不高,所以要通过转码在编译,所以在使用ES6之前要安装Babel,之前安装的时候遇到了一些问题但是没有全部记录下来,现 ...

  2. 前端笔记之ES678&Webpack&Babel(上)初识ES678&Babel&let和const&解构&语法

    一.ES版本简介和调试运行方法 1.1 ECMAScript简介 MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript JavaS ...

  3. babel版本兼容报错处理:Plugin/Preset files are not allowed to export objects

    原文地址: https://www.cnblogs.com/jiebba/p/9618930.html 1.为什么会报错 ? 这里抱着错误是因为 babel 的版本冲突. 多是因为你的 babel 依 ...

  4. 关于babel官网的学习

    提起babel,前端er大概都不陌生.但是为什么要有babel呢?解决了什么问题?怎么使用babel呢?注意点在哪?以下就从这几个方面总结一下我关于babel学习的结果吧. 为什么要有babel呢? ...

  5. babel(一)

    一.babel npm babel src/index.js -d lib 二.@babel/core   @babel/cli @babel/core  转换语法核心 @babel/cli   执行 ...

  6. Plugin/Preset files are not allowed to export objects,webpack报错/babel报错的解决方法

    1.为什么会报错 ? 这里抱着错误是因为 babel 的版本冲突. 多是因为你的 babel 依赖包不兼容. 可以查看你的 package.json 的依赖列表 即有 babel 7.0 版本的( @ ...

  7. [转] babel 教程

    在前端开发领域,浏览器兼容性问题从来不曾消失.除了 CSS,我们还要面对 JavaScript 的兼容性问题. 不同的浏览器讲着不同的 JavaScript 语言,不同的浏览器版本同样讲着不同的 Ja ...

  8. 安装babel遇到的异常

    Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure ...

  9. 《转》Babel 入门教程

    ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...

  10. babel 7 简单升级指南

    babel 7 babel 7 发布两天了,试着对当前项目更新了下,仅此记录分享 主要改动参考 官方博客 官方升级指南 主要升级内容 不再支持放弃维护的 node 版本 0.10.0.12.4.5 使 ...

随机推荐

  1. 基本类型变量、引用类型变量的在java中的存放位置

    一.局部变量存储在方法栈中 在方法中声明的变量,即该变量是局部变量,每当程序调用方法时,系统都会为该方法建立一个方法栈,其所在方法中声明的变量就放在方法栈中,当方法结束系统会释放方法栈,其对应在该方法 ...

  2. android dm-verity 功能【转】

    转自:https://blog.csdn.net/ee230/article/details/73348344 Android dm-verity 实现原理深入研究 思维导图: dm-verity 说 ...

  3. Bringing Native Performance to Electron

    Bringing Native Performance to Electron https://realm.io/blog/native-performance-electron-realm/ Rea ...

  4. linux系统的三种网络连接模式

    VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转换模式)和host-only(主机模式).要想在网络管理和维护中合理应用它们,你就应该先了解一下这三种工作模式. 1 ...

  5. 第八章 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

    因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...

  6. Navicat for MySQL连接mysql数据库时提示错误:Can't connect to MySQL server (10060)

    导致些问题可能有以下几个原因: 1.网络不通: 2.服务未启动: 3.防火墙端口未开放: a)首先确认mysql配置正确,并正确开启 service mysqld start; 设置mysql远程连接 ...

  7. HashMap多线程put后get为null和多线程put的时候可能导致元素丢失

    一.多线程put后get为null 源码定位 void transfer(Entry[] newTable) { Entry[] src = table; int newCapacity = newT ...

  8. 037_nginx第三方扩展

    一.ngx_func_limit_req.conf(nginx限制请求数配置) # limit req zone limit_req_zone $binary_remote_addr $http_us ...

  9. zabbix在运维方面的监控方法小结

    一些经典的运维问题: .配置文件中有空格,导致服务端下发的域名出现问题 .修改数据库没有备份 .修改dnspod问题,指向了错误的IP地址 .时间不一致,需要重新设定时区 .启动程序必须是最新版本,如 ...

  10. FreeSWITCH 增删模组

    今天在尝试FreeSWITCH新功能时,遇到一个问题,就是该功能所需要的模组没有加载,导致写了好久的代码不能看到效果,让人很是忧伤啊! 再此,将FS模组增删的方法记录下,以方便遇到同样问题的童鞋. 具 ...