ES6+的一些新特性

1.前端模块化

1.1 commonJS模块化
	规范:
	导出:
		module.exports={
			firstName
		}
	导入:
		let {} =require('xxx.js')
1.2 ES6模块化
	规范:
	导出:
		列表导出 export {变量}
		重命名导出 export {变量名 as 新变量名}
		导出单个属性 export let a=1;
		export function get(){};
		默认导出 一个模块只允许有一个默认导出
		export default {
			变量
		}
		export default function(){

		}
	导入:
		1.列表导入
		import {变量名} from 'xxx.js'
		2.重命名导入
		import {变量名 as 新变量名} from 'xxx.js'
		3.导入单个属性 
		import a from 'xxx.js'
		4.导入默认导出内容
		import 变量名 from 'xxx.js';
		5.导入export和默认导出的内容
		import * as obj from 'xxx.js'

由于一些浏览器对于高版本的ES语法并不完全支持,因此则会用到转码工具将高版本的代码转化为低版本的代码。

2.转码工具的使用(babel)

安装
2.1 初始化项目
	npm init 
	npm init -y(直接执行)
2.2 安装转码工具
	cnpm install -g babel-cli
	cnpm install --save -dev babel-cli babel-preset-latest(安装工具和规则)
2.3 安装转换规则(上面的第二段代码已经执行过)
	cnpm install -g babel-preset-latest
2.4 指定转换规则 新建.babelrc 在.babelrc文件中输入以下代码
	{
	    "presets":["latest"]
	}

使用
将某个es6文件的代码转化为es5代码:babel xxx.js -------在控制台输出结果
将一个es6文件的代码转化为es5代码并保存到另一个文件中:babel 1-xxx.js --out-file 2-xxx.js
将整个文件夹中的文件全部转化为es5代码并输出到另一个文件夹:babel xxx --out-dir xxx2

3.变量关键字

var 变量提升 重复声明 不具有局部作用域
let 不会变量提升 不可以重复声明 具有局部作用域
const 不会变量提升 不可以重复声明 具有局部作用域,声明得变量声明得时候需要赋值

包管理工具的差别

npm
国外包管理工具 服务器部署在外网 githup 


cnpm 
国内包管理工具 服务器部署淘宝镜像 mirror gitee

yarn 
npm  cnpm 重新下载依赖 重新下载工具库
yarn 先去缓存中查找依赖或者工具库 找不到再去下载
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值