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只执行一次, 如果下次再去加载同目录下同文件 ...
随机推荐
- v-charts x轴字体斜显示
如下图,因为X轴内容太多,放不下,插件默认间隔显示需求:X轴内容要全部显示出来(只有斜显示或固定宽多余的用省略代替,本来需要就是想显示全部内容,所以只能取斜显示的方案) 先看看v-charts的文档: ...
- 嗅探、DNS劫持配合CS钓鱼
本章节讲述的是嗅探和DNS劫持的利用 嗅探:同一个局域网下,原本应该丢弃的包,被保留下来,即使不开双向欺骗 Driftnet工具:Driftnet监视网络流量,抓取网络流量中的JPEG和GIF图像.这 ...
- redis两种持久化方式RDB和AOF
目录 前言 1. Redis 数据库结构 2. RDB 持久化 2.1. RDB 的创建和载入 2.1.1. 手动触发保存 SAVE 命令 BGSAVE 命令 SAVE 和 BGSAVE 的比较 2. ...
- 静态存储SRAM设计
SRAM即静态随机存取存储器.它是具有静止存取功能的内存,不需要刷新电路便能保存它内部存储的数据.在工业与科学用的很多子系统,汽车电子等等都用到了SRAM.现代设备中很多都嵌入了几千字节的SRAM.实 ...
- Mac下升级ruby至最新版本
Mac自身的ruby 版本 2.x,通过ruby -v可以查看版本号. 为更新到ruby的最新版本,可通过以下命令解决: brew update brew install ruby 执行完命令后,ru ...
- CentOS7 GlusterFS文件系统部署
一.GlusterFS简介 GlusterFS(GNU ClusterFile System)是一种全对称的开源分布式文件系统,所谓全对称是指GlusterFS采用弹性哈希算法,没有中心节点,所有节点 ...
- .Net框架的模块代码生成器--其三(dotnet tool指令的参数)
别人已经写好了一个这种处理指令参数的库,我们这里是使用别人的库来实现规范的指令系统 继续上一篇的gfile或者新建一个.Net Core控制台程序也可以 1.安装nuget包,程序包管理器控制台运行 ...
- abp集成IdentityServer4和单点登录
在abp开发的系统后,需要使用这个系统作单点登录,及其他项目登录账号依靠abp开发的系统.在官方文档上只找到作为登录服务Identity Server Integration,但是host项目却无法使 ...
- 6.python设置代理和添加镜像源介绍
为什么要修改镜像源? 一般使用python安装库,会用到pip install xxx 指令或者conda install xxx指令,因为pip和conda默认国外镜像源,这时会在Python的官方 ...
- 处理方法返回ModelAndView类型
1.请求 <a href="test">测试</a> 2.处理方法 @RequestMapping("/test") public Mo ...