前端研习录（33）——命令行工具|ECMAScript6简介|Nodejs安装|Babel转码器安装及基本用法详解及示例分析

---

版权声明

• 本文原创作者：清风不渡
• 博客地址：https://blog.csdn.net/WXKKang

---

  重拾前端记忆，记录学习笔记，现在进入ECMAScript6前置学习条件部分

一、命令行工具

  由于ES6要用到的原因，先来简单的了解下命令行工具，它分为以下两种：

• CMD命令行工具
• PowerShell命令行工具

1、CMD命令行

  
（1）打开命令行窗口

• win：点击左下角开始——输入cmd，回车
• win：win+r快速打开窗口——输入cmd，回车
• mac：command+空格，输入terminal

（2）选择盘符：

• 盘符名+冒号，如E:

（3）查看盘符及目录下文件与文件夹

• win：dir
• mac：ls

（4）清空命令行信息

• win：cls
• mac：clear

（5）进入文件夹或目录

• cd 文件夹名称

（6）返回到上一级目录

• cd ../

（7）快速补全目录或文件夹名称

• tab

（8）创建文件夹

• mkdir 文件夹名称

（9）查看输入过的命令

• 上下按键

2、PowerShell命令行

  （1）打开方式：

• 在开始位置搜索PowerShell打开
• 在对应目录按住shift+右键，打开

  （2）其他操作方式与CMD保持一致

二、ECMAScript6简介

  ECMAScript和JavaScript的关系：前者是后者的规格（语言的标准），后者是前者的实现。常规场合这两个词是可以互换的
  而ES6泛指2015年以及之后发布的5.1以后的JavaScript下一代标准

三、Nodejs环境安装

  由于考虑到用户使用浏览器版本可能较低，所以需要将ES6代码进行一个转码，所以需要下载一个Nodejs环境

1、简介

  Nodejs诞生于2009年，主攻服务器方向，使得JavaScript也可以完成服务器代码的编写

2、下载地址

  官方下载地址：https://nodejs.org/en/
  中文网地址：http://kik.cn/
  以中文网为例，点击【下载】，选择对应的电脑操作系统版本进行下载，如下图：

  下载完成后，双击打开安装程序，进行傻瓜式安装：

  至此安装完成，检查下是否安装成功：

3、大量的npm库

  在安装Nodejs的同时，会附带一个 npm命令，npm 是Node的包管理工具，这样正是接下来我们要用到的，现在npm仓库托管了大量的可自由使用的开源库包

4、npm镜像

  由于服务器在国外，为提高下载速度可使用国内的镜像库，如下：

阿里镜像库
https://npmmirror.com/

  可以使用如下命令行用cnpm命令行工具代替默认的 npm：

npm install -g cnpm --registry=https://registry.npmmirror.com

  在CMD窗口复制上述命令行执行， 等待安装完成即可，如下：

  检查是否安装成功：

四、Babel转码器

  Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在老版本的浏览器执行。
  这样我们就可以用ES6的方式编写程序，不用担心现有环境是否支持

Babel官网地址：https://babeljs.io/

1、Babel安装流程

（1）安装Babel

  将Babel使用如下命令行安装在项目根目录下：

使用npm：npm install --save-dev @babel/core
使用npm镜像：cnpm install --save-dev @babel/core

  运行脚本时可能会有以下提示，是因为powershell的安全策略，将该命令视为了不安全脚本，不允许执行。只需要放开权限就行。

  使用管理员身份打开powershell命令窗口，执行以下脚本

set-ExecutionPolicy RemoteSigned

  并在接下来选择【是】，如下：

  便可以正常执行cnpm脚本进行下载了

  下载之后我们便可以在项目根目录下看到Babel

（2）配置文件.babelrc

  Babel的配置文件是.babelrc，存放在项目的根目录下，使用Babel的第一步就是配置这个文件，来设定转码格式和插件，基本格式如下：

{
“presets”: [],
“plugins”: []
}

  根目录下右键【新建文件】.babelrc，将上述内容加到里面，如下：

（3）转码规则

  presets字段设定转码规则，官方提供以下规则集，可根据需要安装

官方安装脚本：npm install --save-dev @babel/preset-env
镜像安装脚本：cnpm install --save-dev @babel/preset-env

  以下表示安装完成

（4）将规则加入.babelrc

  将下面的规则覆盖到之前的.babelrc中

{
“presets”: [
“@babel/env”
],
“plugins”: []
}

2、Babel命令行转码

  Babel提供了命令行转码工具@babel/cli，用于命令行转码，可通过以下脚本下载：

官方脚本： npm install --save-dev @babel/cli
镜像脚本：cnpm install --save-dev @babel/cli

  以下表示安装完成

3、Babel命令行基本用法

小提示：
  如果在执行命令行时报错：Cannot find package ‘@babel/preset-env’
  可以先执行 cnpm unistall babel-preset-env -D 卸载后再执行 cnpm install @babel/preset-env -D 重装presets即可

（1）转码结果输出到标准输出

npx babel 文件名称

  示例如下：

（2）转码结果写入一个文件

npx babel 原文件名 --out-file 写入文件名
npx babel 原文件名 -o 写入文件名

（3）整个目录（文件夹）转码

npx babel 原目录 --out-dir 新目录
npx babel 原目录 -d 新目录