Babel快速入门
作者:姜瑞涛
Github仓库:https://github.com/jruit/babel-tutorial
博客:姜瑞涛的官方网站
原文链接:https://www.jiangruitao.com/docs/babel/rudiments/quick-start/
版权采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议 转载需注明原文作者、链接与版权协议
教程目前连载中,计划2020劳动节全部完成
上一节是Babel简介
这一节我们配置一个最简单的Babel转码工程,来学习整个流程。
本节配套代码是github仓库 https://github.com/jruit/babel-tutorial 的babel01例子
一、Babel的安装,配置与转码
Babel依赖Node.js,没有安装的话,去官网下载安装最新稳定版本的Node.js。
在本地新建一个文件夹babel01,在该文件夹下新建一个js文件,文件命名为babel.config.js。该文件是 Babel配置文件 ,我们在该文件里输入如下内容:
module.exports = {
presets: ["@babel/env"],
plugins: []
}
然后在该文件夹下新建一个js文件main.js,该js里的代码是我们需要转译的,我们写入代码
var fn = (num) => num + 2;
然后执行下面的命令安装三个npm包,这些npm包是Babel官方包
// npm一次性安装多个包,包名之间用空格隔开
npm install --save-dev @babel/cli @babel/core @babel/preset-env
安装完成后,执行下面的命令进行转码,该命令含义是把main.js转码生成compiled.js文件
npx babel main.js -o compiled.js
此时文件夹下会生成compiled.js,该文件是转换后的代码:
"use strict";
var fn = function fn(num) {
return num + 2;
};
这就是一个最简单的Babel使用过程,我们把用ES6编写main.js转换成了ES5的compiled.js。
二、Babel转码说明
babel.config.js是Babel执行时会默认在当前目录寻找的Babel配置文件。
除了babel.config.js,我们也可以选择用.babelrc或.babelrc.js这两种配置文件,还可以直接将配置参数写在package.json。它们的作用都是相同的,只需要选择其中一种。 我们将在另外一节详细介绍Babel的配置文件,接下来默认使用babel.config.js。
@babel/cli,@babel/core与@babel/preset-env是Babel官方的三个包,它们的作用如下:
- @babel/cli是Babel命令行转码工具,如果我们使用命令行进行Babel转码就需要安装它。
- @babel/cli依赖@babel/core,因此也需要安装@babel/core这个Babel核心npm包。
- @babel/preset-env这个npm包提供了ES6转换ES5的语法转换规则,我们在Babel配置文件里指定使用它。如果不使用的话,也可以完成转码,但转码后的代码仍然是ES6的,相当于没有转码。
这些工具后续都会有单独的章节说明,现在先学会简单使用即可。
小结:
1.一个完整的Babel转码工程通常包括如下:
- Babel配置文件
- Babel相关的npm包
- 需要转码的JS文件
2.我们通过以下命令对单个JS文件进行转码:
npx babel main.js -o compiled.js
注:
1.如果安装npm包慢的话,通过以下命令设置npm镜像源为淘宝npm后再安装
npm config set registry https://registry.npm.taobao.org
2.npx babel main.js -o compiled.js命令里npx是新版Node里附带的命令。它运行的时候默认会找到node_modules/.bin/下的路径执行。分别与下面的命令等效。
linux/unix命令行:
node_modules/.bin/babel main.js -o compiled.js
windows的cmd命令行(假设babel01在D:\jiangruitao\路径下):
D:\jiangruitao\babel01\node_modules\.bin\babel main.js -o compiled.js
Babel快速入门的更多相关文章
- webpack快速入门——给webpack增加babel支持
1.Babel的安装与配置 Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个 你需要的功能或拓展,你都需要安 ...
- webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包
随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...
- webpack快速入门——CSS进阶:自动处理CSS3前缀
为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...
- webpack快速入门——如何安装webpack及注意事项
1.window+R键,输入cmd打开命令行工具,输入 mkdir XXXX(XX:文件夹名): 2.cd XXX 进入刚刚创建好的文件夹里,输入cnpm install -g webpack (安装 ...
- webpack快速入门——webpack3.X 快速上手一个Demo
1.进入根目录,建两个文件夹,分别为src和dist 1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块. 2).dist文件夹:用来存放 ...
- webpack快速入门——配置文件:入口和出口,多入口、多出口配置
1.在根目录新建一个webpack.config.js文件,然后开始配置: const path = require('path'); module.exports={ //入口文件的配置项 entr ...
- webpack快速入门——配置文件:服务和热更新
1.在终端安装 cnpm i webpack-dev-server --save-dev 2.配置好后执行 webpack-dev-server,这时候会报错 出现错误,只需要在pagejson里配置 ...
- webpack快速入门——CSS文件打包
1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...
- webpack快速入门——配置JS压缩,打包
1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...
随机推荐
- 用ABAP 生成二维码 QR Code
除了使用我的这篇blogStep by step to create QRCode in ABAP Webdynpro提到的使用ABAP webdynpro生成二维码之外,也可以通过使用二维码在线生成 ...
- vue项目按需加载的3种方式
本文重要是路由打包优化: 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载. 1.vue异步组件技术 vue-router配置路由,使用vue的异步组件技术 ...
- JDBC概述及编程步骤详解
目录 一.JDBC概述 二.JDBC编程步骤(以MySQL为例) 1.导入jar包 2.加载数据库驱动 3.通过DriverManager获得Connection对象 3.定义SQL语句 4.利用Co ...
- Django开发框架知识点
一.什么是web服务器(了解) 当我们在浏览器输入URL后,浏览器会先请求DNS服务器,获得请求站点的 IP 地址.然后发送一个HTTP Request(请求)给拥有该 IP 的主机,接着就会接收到服 ...
- Netty学习(4):NIO网络编程
概述 在 Netty学习(3)中,我们已经学习了 Buffer 和 Channel 的概念, 接下来就让我们通过实现一个 NIO 的多人聊天服务器来深入理解 NIO 的第 3个组件:Selector. ...
- web安全测试--环境搭建
本博客主要作为作者的学习笔记,请勿装载. 作为一个安全测试的入门选手,一切操作在虚拟机中进行是最保险的. 第一先下载自己喜欢的虚拟机,我的笔记本用的VirtualBox(下载地址:https://ww ...
- C语言程序设计(九) 指针
第九章 指针 C程序中的变量都是存储在计算机内存特定的存储单元中的,内存中的每个单元都有唯一的地址 通过取地址运算符&可以获得变量的地址 //L9-1 #include <stdio.h ...
- SpringBoot——Cache使用原理及Redis整合
前言及核心概念介绍 前言 本篇主要介绍SpringBoot2.x 中 Cahe 的原理及几个主要注解,以及整合 Redis 作为缓存的步骤 核心概念 先来看看核心接口的作用及关系图: CachingP ...
- PostgreSQL查询表以及字段的备注
目录 查询所有表名称以及字段含义 查看所有表名 查看表名和备注 查看特定表名备注 查看特定表名字段 查询所有表名称以及字段含义 select c.relname 表名,cast(obj_descrip ...
- 建议20:建议通过Function扩展类型
JavaScript允许为语言的基本数据类型定义方法.通过Object.prototype添加原型方法,该方法可被所有的对象,.这样的方法对函数,数组,字符串,数字,正则表达式和布尔值都适用.例如,通 ...