作者:姜瑞涛

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快速入门的更多相关文章

  1. webpack快速入门——给webpack增加babel支持

    1.Babel的安装与配置 Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个 你需要的功能或拓展,你都需要安 ...

  2. webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包

    随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

  3. webpack快速入门——CSS进阶:自动处理CSS3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  4. webpack快速入门——如何安装webpack及注意事项

    1.window+R键,输入cmd打开命令行工具,输入 mkdir XXXX(XX:文件夹名): 2.cd XXX 进入刚刚创建好的文件夹里,输入cnpm install -g webpack (安装 ...

  5. webpack快速入门——webpack3.X 快速上手一个Demo

    1.进入根目录,建两个文件夹,分别为src和dist 1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块. 2).dist文件夹:用来存放 ...

  6. webpack快速入门——配置文件:入口和出口,多入口、多出口配置

    1.在根目录新建一个webpack.config.js文件,然后开始配置: const path = require('path'); module.exports={ //入口文件的配置项 entr ...

  7. webpack快速入门——配置文件:服务和热更新

    1.在终端安装 cnpm i webpack-dev-server --save-dev 2.配置好后执行 webpack-dev-server,这时候会报错 出现错误,只需要在pagejson里配置 ...

  8. webpack快速入门——CSS文件打包

    1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

  9. webpack快速入门——配置JS压缩,打包

    1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...

随机推荐

  1. 1024程序员节最新福利之2018最全H5前端资料集

    前言 有好久没有写博客了,主要这段时间都沉迷学习无法自拔了,哈哈.自吹一波. 前两天不是1024节吗,所以就有很多福利出现了,当然每个人能都获得的信息都有所不同,这就是所谓的信息差.秉着好东西需要分享 ...

  2. 盒马微信小程序

    盒马app刚出现,就吸足了眼球.最近看了看盒马界面,很Q,就想着仿照app写个小程序. 功能介绍 好奇微信小程序是如何制作的,也对盒马app感兴趣,就尝试写了这个盒马小程序.实现了app的部分功能,还 ...

  3. 原生js实现在表格用鼠标框选并有反选功能

    今天应同学要求,需要写一个像Excel那样框选高亮,并且实现框选区域实现反选功能.要我用原生js写,由于没什么经验翻阅了很多资料,第一次写文章希望各位指出不足!! 上来先建表 <div clas ...

  4. Tomcat 之startup.bat启动失败案例

    今天我在部署一个Tomcat环境时,各种变量都配置完了,最后启动Tomcat时,Tomcat一闪而过,当时我的内心是崩溃的~~ 然后我就开始百度.定位问题.进入cmd命令行窗口,cd进入到Tomcat ...

  5. 教你高效使用数据可视化BI软件创建医院卫生耗材运营监控大屏

    灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件.   本文以医院卫生耗材运营监控大屏 ...

  6. django使用户名和邮箱都能登录

    为了能够让邮箱也能登录,需要重新定义认证功能,需要把email添加成username用于认证 定义的class继承ModelBackend,使用Q方法并集 然后在settings.py里面添加 这样既 ...

  7. Java-字节输入输出。(新手)

    参考手册: BufferedInputStream BufferedOutputStream 实例: import java.io.*; /* * 文件的复制方式 * 1 字节流读写单个字节 * 2 ...

  8. linux无文件执行— fexecve 揭秘

    前言 良好的习惯是人生产生复利的有力助手. 继续2020年的flag,至少每周更一篇文章. 无文件执行 之前的文章中,我们讲到了无文件执行的方法以及混淆进程参数的方法,今天我们继续讲解一种linux上 ...

  9. Java中static和final的解析

    static关键字和final关键字是Java中一个难点&重点.本文通过static的用途.常见问题.final的用途.final常见问题,以及static和final的对比来解释这两个关键字 ...

  10. JavaScript零宽字符

    什么是零宽字符 一种不可打印的Unicode字符, 在浏览器等环境不可见, 但是真是存在, 获取字符串长度时也会占位置, 表示某一种控制功能的字符. 常见的零宽字符有哪些 零宽空格(zero-widt ...