个人学习,仅供参考.

第一步:node环境搭建

https://nodejs.org/zh-cn/下载并安装长期支持版.

创建项目目录,在项目目录下查看node是否安装成功

第二步:初始化package.json

C:\project\babeltest>npm init -y

第三步:Babel的安装包

安装babel-preset-env和babel-cli两个安装包

C:\project\babeltest> npm install --save-dev babel-preset-env babel-cli

在package.json内可见安装的依赖包.

第四步:创建.babelrc文件配置转码

在编译器中创建.babelrc,设置参数,env项是借助插件babel-preset-env，这个配置说的是babel对es6,es7,es8进行转码

{"presets": ["env"]
}

第五步:创建需要转码的文件夹和转码后存放的文件夹

用src内存放es6语法代码,用dist存放转码后的代码

C:\project\babeltest>babel src/test.js -o dist/test2.js

假如提示,babel不是内外部命令,就是路径不对.可以去设置环境变量,或者全局重新安装babel.

环境变量设置参考:

https://blog.csdn.net/weixin_45112150/article/details/114991042?ops_request_misc=&request_id=&biz_id=102&utm_term=babel%20src/test.js%20-o%20dist/test&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-.first_rank_v2_pc_rank_v29&spm=1018.2226.3001.4187

重新安装:--global

C:\project\babeltest> npm install --global babel-cli  babel-preset-env

安装成功:可以查看babel版本

执行:

第六点:其他转化方式

单个文件转化:[-o]

babel  文件转化前路径+文件名 -o 文件转化后路径+文件名

文件夹转化 :[-d] src文件夹内所有文件转化到dist中

C:\project\babeltest>babel src -d dist

实时监控转化:[-w -d] 修改保存后就自动生成

C:\project\babeltest>babel src -w -d dist

Bable的简单使用相关推荐

使用JavaScript实现一个简单的编译器
本文同步在个人博客shymean.com上,欢迎关注在前端开发中也会或多或少接触到一些与编译相关的内容,常见的有将ES6.7代码编译成ES5的代码将SCSS.LESS代码转换成浏览器支持的CSS ...
Vue简单示例——weex跨平台解决方案
简单介绍: Weex的出现主要解决了Web开发的应用频繁发布版本和多端研发两个问题,同时解决了前端语言性能差异和显示效果受限的问题. 什么是weex: Weex是使用流行的Web开发体验来开发高性能原 ...
实现一个简单的SSR，了解服务端渲染
在前面的文章中,我已经对服务端渲染有了充分介绍,并且实现了最简单的服务端渲染. 在这篇文章中,就基于React,一步一步来搭建一个服务端渲染的项目. 这里是github地址 react-ssr,欢迎s ...
vue cli记录一次因三方依赖插件未进行bable编译造成的ie不兼容问题
vue cli记录一次因三方依赖插件未进行bable编译造成的ie不兼容问题因业务需求,vue项目中需要使用一个拖拽缩放插件vue-grid-layout 业务完成后客户需要兼容ie, 微软宣布将于 ...
在docker上安装部署tomcat项目超简单，拿来主义
在docker中部署tomcat,非常简单,而且省去了手动安装jdk等步骤,只需要将war包复制在容器tomcat实例中的webapps下面即可.以下将详细讲解流程: 在windows中打好包以后用w ...
Linux下tomcat的安装与卸载以及配置（超简单）
无敌简单的几步 1.安装 //首先你需要下载好tomcat包 sudo tar -xvzf apache-tomcat-7.0.85.tar.gz(这里是包名) -C 你要放的位置 2.卸载 rm - ...
Docker安装Apache与运行简单的web服务——httpd helloworld
Docker运行简单的web服务--httpd helloworld目录[阅读时间:约5分钟] 一.Docker简介二.Docker的安装与配置[CentOS环境] 三.Docker运行简单的web ...
Docker的安装、镜像源更换与简单应用
Docker的安装.镜像源更换与简单应用[阅读时间:约20分钟] 一.概述二.系统环境&项目介绍 1.系统环境 2.项目的任务要求三.Docker的安装四.Docker的简单应用 1. ...
基于Golang的简单web服务程序开发——CloudGo
基于Golang的简单web服务程序开发--CloudGo[阅读时间:约10分钟] 一.概述二.系统环境&项目介绍 1.系统环境 2.项目的任务要求 (1)基本要求 (2)扩展要求三.具体 ...
简单图文配置golang+vscode【win10/centos7+golang helloworld+解决install failed等情况】
博客目录(阅读时间:10分钟) 一.win10 0.系统环境 1. win10配置golang环境 ①下载相关软件 ②创建gowork工作空间 ③配置环境变量(GOPATH+PATH) ④验证环境配置 ...

Bable的简单使用