前端研习录(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://nodejs.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 新目录