ES6学习 - 环境搭建

596 阅读3分钟

什么是ECMScript

ECMScript是一种标准,JavaScript是一门遵循了ECMScript语言规范而设计的编程语言

如何让浏览器支持ES的新语法

使用Babel工具可以将ES新语法转化为浏览器支持的语法

Babel被配置在webpack构建工具中

什么是脚手架

事先搭建好的开发环境,把代码上传到npm包管理网站上,使用的时候,只需要使用简单的命令,就可以把上传到npm的代码下载下来,这样就具有了同样的开发环境(比如配备Babel的开发环境)。当在这样的开发环境下写ES新的语法,那么开发环境就会自动的将ES新的语法转化为浏览器支持的语法,这样就非常方便。

Node安装与NPM源的切换

安装Node

安装地址:nodejs.org/en ,注意:下载长期支持版本(LTS)

安装完成,在终端输入: node-v (如:V12.16.1)

安装好之后会自动的安装NPM包管理工具

NPM:Node Package Manager

查看npm版本: npm -v (如:V6.14.4)

Node配置

  1. 在安装目录下,如 D:\soft\nodejs 新建两个文件夹 node_global(全局包存放目录) 和 node_cache(缓存目录);

  2. 打开命令行工具,执行以下两句操作: npm config set prefix "D:\soft\nodejs\node_global"``npm config set cache "D:\soft\nodejs\node_cache"

  3. 配置环境变量:

  • 系统变量,新建NODE_PATH,填写node的安装路径,如:D:\soft\node
  • 修改系统变量中的Path,编辑-> 新建->填写 %NODE_PATH%->点击3次确定
  • 编辑用户变量的 path,将默认的 C 盘下 APPData/Roaming\npm 修改为 D:\soft\node\node_global
  • 最后重启电脑

安装NRM

NRM:npm registry manager

它是npm镜像源的管理工具,使用NPM可以切换为当前速度最快的源

使用npm安装包速度慢的原因: 下载的时候会连接国外的源

安装:

npm install Pana/nrm -g

并不推荐使用npm install -g nrm安装,否则出现使用nrm ls时当前的源前没有星号且nrm current无效

安装nrm的时候可能会报错:

# require() of ES modules is not supported.

解决办法:

npm install -g nrm open@8.4.2 --save

NRM常用命令

查看可选源

nrm ls

image.png

测试源响应时间

nrm test + 源的名称

如: nrm test taobao

image.png

切换源

如何切换源头呢?

nrm use + 源的名称

查看当前源

nrm current

增加定制源

nrm add 源的名字 http://192.168.x.x:xxxx

删除源

nrm del 源的名称

构建开发环境

npm install imooc-es-cli -g

去哪里搜索想要的包?

查看是否安装成功imooc-es-cli --version

查看当前文件目录ls

查看当前命令有哪些命令: imooc-es-cli -h

image.png

初始化项目

进入文件夹:imooc-es-cli init,这样会初始化一个新的项目

安装项目依赖的包

  • cd 进入这个初始化新生成的项目
  • npm install 安装项目依赖的包
  • npm run start启动项目,得到项目的运行地址

image.png

看下项目目录,src下面的index.js中的代码会被打包编译,static中的资源不会被webpack打包编译

image.png

我们可以大仙控制台中输出了9,那么这个结果是es6的代码输出的还是es5的代码输出的呢?

image.png

我们可以通过控制台中的source发现src下面的index.js中的es6代码被webpack编程成了es5的代码