babel 的简单使用
之前在项目中使用.balelrc文件,但是一直不知道具体怎么使用,就知道可以将es6语法转码为es5语法。
今天就简单的做个例子,也算是记录一下困扰了好久的问题。
转码步骤:
首先在项目的目录中安装Babel
创建配置文件
.balelrc
,存放在项目的根目录下利用Babel提供的命令行工具
@babel/cli
,用命令行进行转码
1.1 安装Babel,可以直接使用命令行安装。
npm install --save-dev @babel/core
1.2 配置文件 .babelrc
该文件用来设置转码规则和插件的,基本格式为:
{
"presets": [],
"plugins": []
}
presets
字段设定转码规则,官方提供一下的规则集,可以按需加载
# 最新转码规则
$ npm install --save-dev @babel/preset-env # react 转码规则
$ npm install --save-dev @babel/preset-react
然后将这些规则加入.babelrc文件
{
"presets":[
"@babel/env",
"@babel.preset-react"
],
"plugins":[]
}
1.3 命令行转码
Babel 提供命令行工具@babel/cli
,用于命令行转码。
npm install --save-dev @babel/cli
基本用法:
# 转码结果输出到标准输出
$ npx babel example.js # 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js # 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib # -s 参数生成source map文件
$ npx babel src -d lib -s
这里附上自己转码配置文件和转码前后文件内容和转码命令(就是自己玩了一下,嘿嘿嘿~)
其实网上的资料还是很多滴,就是自己想要知道怎么自己转码,其实用webpack也是比较简单的。
首先,安装babel-preset-env包:npm install –save-dev babel-preset-env
在根目录下创建.babelrc文件。
为了检验我们的配置是否成功,我们再安装babel-cli包:npm install --save-dev babel-cli,然后我们在根目录下创建一个babel_test文件用于测试,如下:
let arr = [1, 2, 3];
console.log([...arr]);
并在package.json文件中添加npm脚本:
"scripts": {
"dev": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"babel": "babel ./babel_test/test.js -o ./babel_test/res.js"
},
该脚本的作用就是将test.js进行转码,并将转码后的内容存储到res.js文件中。
在终端执行npm run babel则会在相同目录下生成res.js:
"use strict";
var arr = [1, 2, 3];
console.log([].concat(arr));
该文件已经转码成功,说明我们的配置是正确的。
babel 的简单使用的更多相关文章
- babel如此简单
凡是看到这个标题点进来的同学,相信对babel都有了一定的了解.babel使用起来很简单,简单到都没有必要写一篇文章去介绍,直接看看官方文档就可以.所以我也在怀疑到底该不该写这篇文章.想来想去还是决定 ...
- babel 7 简单升级指南
babel 7 babel 7 发布两天了,试着对当前项目更新了下,仅此记录分享 主要改动参考 官方博客 官方升级指南 主要升级内容 不再支持放弃维护的 node 版本 0.10.0.12.4.5 使 ...
- babel 7 简单指北
babel 7 对于 babel 7,babel 的官网已经介绍得非常详细了,但有时感觉文档和实际使用总是差那么一点东西. 主要包 先来看一下主要的包,babel 7 对于包进行了一些简化. @bab ...
- babel简介——简单介绍与实用(转)
博客讲解内容如下: 1.babel是什么 2.javascript制作规范 3.babel转译器 4.babel的使用 5.常见的几种babel转译器和插件 6.babel最常见配置选项 7.babe ...
- webpack4 babel 篇
demo 代码点此,如果对 babel 不熟,可以看一下babel 7 简单指北. webpack 使用 babel 来打包使用 es6 及以上语法的 js 文件是非常方便的,可以通过配置,将 es6 ...
- babel plugin和presets是什么,怎么用?
https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/ 当开发react或者vuejs app时,开发者 ...
- Babel知识点相关
本篇是根据最新babel 7版本写的,里面用到的一些babel相关包都是babel 7的 1,babel是如何工作的 babel是一个转译器,这里我严格区分了转译器和编译器,因为编译器最终生成 ...
- babel 与 ast
什么是 babel Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中. 什 ...
- 前端JavaScript高级面试笔记
一.ES6 1.模块化 ES6通过export和import实现模块化 ES6的模块化的基本规则或特点, 欢迎补充: 1:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件 ...
随机推荐
- 1994_An Algorithm To Reconstruct Wideband Speech From Narrowband Speech Based On Codebook Mapping
论文地址:基于码本映射的窄带语音宽带重建算法 博客作者:凌逆战 博客地址:https://www.cnblogs.com/LXP-Never/p/12144324.html 摘要 本文提出了一种从窄带 ...
- HDFS基本命令fs的使用操作
HDFS(Hadoop Distributed File System)就是hadoop分布式文件系统,fs是操作HDFS文件的一个常用命令. 1.hadoop fs -help 查看fs使用帮助 2 ...
- ts中的泛型
/** * 泛型:软件工程中,我们不仅要创造定义良好的API,同时也要考虑可重用行,组件不仅能 * 够支持当前的数据类型,同时也能够支持未来数据类型. * 通俗理解:泛型就是解决类.接口.方法的复用性 ...
- VMvare桥接网络连接不上解决办法
记一次学习中的突发状况.由于本人的pc时长要在不同的网络中进行切换,ip地址一般都是不固定的,所以我使用虚拟机的时候一般使用的都是让VMvare自动识别网络环境.直到今天遇到一种突发情况,VMvare ...
- 证明task线程是来源于线程池的,线程重用
1.线程池是单例的,全局唯一的,设置线程池最大活跃线程数是5,设置后,允许同时并发的Task只有5个,我们开启100个task去做任务,从最后的输出结果看到,虽然开启了100个task,但是线程id始 ...
- SpringBoot整合NoSql--(二)MongoDB
简介: MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案.MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是 ...
- Vim 全选命令
ggVG稍微解释一下上面的命令gg 让光标移到首行,在vim才有效,vi中无效V 是进入Visual(可视)模式G 光标移到最后一行选中内容以后就可以其他的操作了,比如:d 删除选中内容y ...
- Docker Compose 启动mysql,redis,rabbitmq
这里使用的centos7,首先切换到root. sudo -s 首先去设置下载镜像,否则下载这三个东西要很久,而且可能失败. vim /etc/docker/daemon.json 内容如下: { & ...
- 纪中5日T1 1564. 旅游
1564. 旅游 题目描述 输入N个数,从中选择一些出来计算出总和,问有多少种选法使得和为质数. 输入 第一行一个整数N. 第二行N个整数,表示这N个数的值. 输出 一个整数,表示方案数. 样例输入 ...
- 洛谷题解 P1134 【阶乘问题】
原题传送门 题目描述 也许你早就知道阶乘的含义,N阶乘是由1到N相乘而产生,如: 12!=1×2×3×4×5×6×7×8×9×10×11×12=479,001,600 12的阶乘最右边的非零位为6. ...