什么是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配置
-
在安装目录下,如
D:\soft\nodejs新建两个文件夹node_global(全局包存放目录) 和node_cache(缓存目录); -
打开命令行工具,执行以下两句操作:
npm config set prefix "D:\soft\nodejs\node_global"``npm config set cache "D:\soft\nodejs\node_cache"; -
配置环境变量:
- 系统变量,新建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
测试源响应时间
nrm test + 源的名称
如: nrm test taobao
切换源
如何切换源头呢?
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
初始化项目
进入文件夹:imooc-es-cli init,这样会初始化一个新的项目
安装项目依赖的包
cd进入这个初始化新生成的项目npm install安装项目依赖的包npm run start启动项目,得到项目的运行地址
看下项目目录,src下面的index.js中的代码会被打包编译,static中的资源不会被webpack打包编译
我们可以大仙控制台中输出了9,那么这个结果是es6的代码输出的还是es5的代码输出的呢?
我们可以通过控制台中的source发现src下面的index.js中的es6代码被webpack编程成了es5的代码