Babel的配置和使用
一、安装:
》将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的配置和使用相关推荐
- webpack5 中 babel 的配置及 JS 浏览器向下兼容处理
JS 浏览器兼容 yarn add babel-loader @babel/core @babel/preset-env module: {rules: [//规则定义{test: /\.js$/, ...
- webpack 配置 babel
文章目录 根据 webpack 版本的不同,安装的 babel 依赖有些区别,下面的是 webpakc 4.2 及以上版本安装的依赖. 4.2 之前的是:babel-core.babel-pres ...
- webpack devserver配置_在webpack中使用babel
本文衔接上篇文章: 不睡觉的怪叔叔:webpack的模块热替换zhuanlan.zhihu.com 一.为什么需要Babel? 由于某些浏览器不支持ES6,所以使用ES6写的JavaScript程序 ...
- 关于babel配置使用可选链
什么是可选链 具体而言它是一种操作符(?.),MDN给出的官方解释是:允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效.?. 操作符的功能类似于 . 链式操作符,不同之处在于 ...
- ES6常用语法糖(附Babel配置使用方法)
获取数据: 解构赋值 解构赋值 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- webpack5.x 各种开发常见配置大汇总 loader plugin devServer proxy babel 懒加载
webpack学习之旅 文章目录 webpack学习之旅 webpack基础打包 认识webpack 脚手架依赖webpack webpack是什么 Vue项目加载的文件有哪些 webpack使用前提 ...
- webpack及babel配置
请先确认自己的电脑已经安装了 node 和 npm,没有安装的请先安装,以下操作需在安装了这两个的基础上操作 webpack配置 1. 创建一个空文件夹 2. 创建 package.json 文件- ...
- webpack 大法好 ---- 基础概念与配置(1)
再一次见面! Light 还是太太太懒了,距离上一篇没啥营养的文章已经过去好多天.今天为大家介绍介绍 webpack 最基本的概念,以及简单的配置,让你能快速得搭建一个可用的 webpack 开发环境 ...
- 揭秘vue——vue-cli3全面配置
★ vue-cli3 全面配置 ★ Nuxt.js 全面配置 创建项目 配置环境变量 通过在package.json里的scripts配置项中添加--mode xxx来选择不同环境 在项目根目 ...
最新文章
- mysql relay log_windows下mysql主从出现Failed to open the relay log(relay_log_pos 248)解决办法...
- Android控件布局属性全解(一看就会)
- 开源团队协作 TMS 2.4.0 版本发布
- poj 1006(中国剩余定理)
- 1.记住密码 提示框
- 测试电梯的测试用例_【转】电梯功能的测试用例和测试方案
- iphone ios编译ffmpeg
- Avalonia跨平台入门第十五篇之ListBox聊天窗口
- LSGO软件技术团队2015~2016学年第十三周(1123~1129)总结
- java获取spring注解的实体_Spring 注解实体类中非数据库字段属性
- VMware View 要求操作句柄的状态错误
- Electron IPC(进程间通信)之ipcMain和ipcRenderer
- 欧标语言等级划分 C1,小语种欧标等级的要求
- 树莓派蜂鸣器唱歌c语言,关于蜂鸣器唱歌程序
- ueditor imageup.php,ThinkPHP整合百度Ueditor,thinkphpueditor_PHP教程
- 校招/社招-算法岗简历及面试经验分享
- 用Python设计杂志订阅系统
- FPGA开发——SRIO
- 我的价值观:底线和极限以及价值观空间
- 「对话GitOps之星」张晋涛:“肝帝”时不时也会拖更
热门文章
- LeetCode 56. Merge Intervals
- 同时给两个变量值赋值
- [转载] 晓说——第21期:“看美国”系列之《日裔步兵团的奋战》
- 对文本框只允许输入数字
- 计算机应用基础东师,2018年东师计算机应用基础.doc
- redis api java 正则_java代码怎么正则删除redis的数据
- java map key是否存在_java中如何判断map集合中是否存在key
- 9、计算机图形学——纹理的应用(环境贴图、凸凹贴图、法线贴图以及位移贴图)
- Python进阶4——元组与拆包
- MATLAB表白利器