一、安装:

》将es6转成es5方法有多种:

==》1.可以使用在线编译。babel在线编译

==》2.本地全局安装 or 项目安装 babel-cli,就可以将es6–>es5

====》2.1本地全局安装: 

npm install -g babel-cli

====》2.2项目安装(推荐):

npm install --save-dev babel-cli babel-preset-es2015

–save 是将babel-cli写进packge.json文件,-dev是将babel-cli写进开发依赖中,而不是生产的依赖

二、新建 .babelrc文件

》1.新建:(因为win系统不允许新建空文件名)
==》1.1 使用编辑器(sublime)新建 .babelrc文件 (这个编辑器可以成功新建)
==》1.2 使用cmd命令新建:type nul>.babelrc

》2.内容:

{"presets": "es2015"
}

不填写此内容,编译会失败

三、编译:

在packge.json中的scripts下的配置:

"build": "babel src --watch --out-dir lib"

然后运行:

npm run build

它会将src目录中的所有js文件文件编译到lib目录中,并实现时时监听
*
1. src、lib是目录;
2. –watch监听改变并自动编译
3. –out-dir表示编译的类型是文件
4. 在packge.json中的scripts下配置之后,才可以运行npm run build

四、附Babel常用命令:

1、转换es6.js文件并在当前命名行程序窗口中输出

babel es6.js

2、将es6.js转换后输出到es5.js文件中(使用 -o 或 –out-file )

  babel es6.js -o es5.js babel es6.js --out-file es5.js

3、实时监控es6.js一有变化就重新编译(使用 -w 或 –watch )

  babel es6.js -w --out-file es5.jsbabel es6.js --watch --out-file es5.js

4、编译整个src文件夹并输出到lib文件夹中(使用 -d 或 –out-dir )

  babel src -d libbabel src --out-dir lib

5、编译整个src文件夹并输出到一个文件中

  babel src --out-file es5.js

6、直接输入babel-node命令,可以在命令行中直接运行ES6代码

 babel-node

参考原文

转载于:https://www.cnblogs.com/wenwenwei/p/10017855.html

Babel的配置和使用相关推荐

  1. webpack5 中 babel 的配置及 JS 浏览器向下兼容处理

    JS 浏览器兼容 yarn add babel-loader @babel/core @babel/preset-env module: {rules: [//规则定义{test: /\.js$/, ...

  2. webpack 配置 babel

    文章目录   根据 webpack 版本的不同,安装的 babel 依赖有些区别,下面的是 webpakc 4.2 及以上版本安装的依赖. 4.2 之前的是:babel-core.babel-pres ...

  3. webpack devserver配置_在webpack中使用babel

    本文衔接上篇文章: 不睡觉的怪叔叔:webpack的模块热替换​zhuanlan.zhihu.com 一.为什么需要Babel? 由于某些浏览器不支持ES6,所以使用ES6写的JavaScript程序 ...

  4. 关于babel配置使用可选链

    什么是可选链 具体而言它是一种操作符(?.),MDN给出的官方解释是:允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效.?. 操作符的功能类似于 . 链式操作符,不同之处在于 ...

  5. ES6常用语法糖(附Babel配置使用方法)

    获取数据: 解构赋值 解构赋值 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...

  6. webpack5.x 各种开发常见配置大汇总 loader plugin devServer proxy babel 懒加载

    webpack学习之旅 文章目录 webpack学习之旅 webpack基础打包 认识webpack 脚手架依赖webpack webpack是什么 Vue项目加载的文件有哪些 webpack使用前提 ...

  7. webpack及babel配置

    请先确认自己的电脑已经安装了 node 和 npm,没有安装的请先安装,以下操作需在安装了这两个的基础上操作 webpack配置 1. 创建一个空文件夹 2. 创建 package.json 文件- ...

  8. webpack 大法好 ---- 基础概念与配置(1)

    再一次见面! Light 还是太太太懒了,距离上一篇没啥营养的文章已经过去好多天.今天为大家介绍介绍 webpack 最基本的概念,以及简单的配置,让你能快速得搭建一个可用的 webpack 开发环境 ...

  9. 揭秘vue——vue-cli3全面配置

    ★ vue-cli3 全面配置 ★ Nuxt.js 全面配置 创建项目 配置环境变量   通过在package.json里的scripts配置项中添加--mode xxx来选择不同环境   在项目根目 ...

最新文章

  1. mysql relay log_windows下mysql主从出现Failed to open the relay log(relay_log_pos 248)解决办法...
  2. Android控件布局属性全解(一看就会)
  3. 开源团队协作 TMS 2.4.0 版本发布
  4. poj 1006(中国剩余定理)
  5. 1.记住密码 提示框
  6. 测试电梯的测试用例_【转】电梯功能的测试用例和测试方案
  7. iphone ios编译ffmpeg
  8. Avalonia跨平台入门第十五篇之ListBox聊天窗口
  9. LSGO软件技术团队2015~2016学年第十三周(1123~1129)总结
  10. java获取spring注解的实体_Spring 注解实体类中非数据库字段属性
  11. VMware View 要求操作句柄的状态错误
  12. Electron IPC(进程间通信)之ipcMain和ipcRenderer
  13. 欧标语言等级划分 C1,小语种欧标等级的要求
  14. 树莓派蜂鸣器唱歌c语言,关于蜂鸣器唱歌程序
  15. ueditor imageup.php,ThinkPHP整合百度Ueditor,thinkphpueditor_PHP教程
  16. 校招/社招-算法岗简历及面试经验分享
  17. 用Python设计杂志订阅系统
  18. FPGA开发——SRIO
  19. 我的价值观:底线和极限以及价值观空间
  20. 「对话GitOps之星」张晋涛:“肝帝”时不时也会拖更

热门文章

  1. LeetCode 56. Merge Intervals
  2. 同时给两个变量值赋值
  3. [转载] 晓说——第21期:“看美国”系列之《日裔步兵团的奋战》
  4. 对文本框只允许输入数字
  5. 计算机应用基础东师,2018年东师计算机应用基础.doc
  6. redis api java 正则_java代码怎么正则删除redis的数据
  7. java map key是否存在_java中如何判断map集合中是否存在key
  8. 9、计算机图形学——纹理的应用(环境贴图、凸凹贴图、法线贴图以及位移贴图)
  9. Python进阶4——元组与拆包
  10. MATLAB表白利器