es6(ecmascript 2015)

1.es6:

 升级了一些属性和方法
 2015年6月发布第一版本es6:
 	(EcmaScript 2015)

兼容性比较差:
	浏览器的兼容性更差


编写:
	es6:效率更高
	--》转换为es5

2.包管理机制

node:
	模块化概念

	myscript.js:包/模块
		funciton Student(){}
		<script src=''></script>

	框架(大)-〉包-》模块

npm:node package manager:
	官网部署在国外
	检测仓库地址:npm config list

国内仓库:
		淘宝镜像:
			http://registry.npm.taobao.org

1.修改npm仓库地址

	npm config set registry http://registry.npm.taobao.org

	npm install jquery
	npm uninstall jquery

2.下载cnpm:

	1.通过npm下载cnpm,指定cnpm的仓库地址
		npm install cnpm -g --registry http://registry.npm.taobao.org
	
	cnpm config list:    检测

	cnpm install jquery         //下载cnpm
	cnpm uninstall jquery     //卸载cnpm

3.yarn

	(Yet Another Resource Negotiator,另一种资源协调者)
	优点:
		加载更快
		加载包时可以指定版本号
		缓存机制

	1.安装yarn
		npm install yarn -g

		yarn add jquery/yarn add jquery-3.5.0( yarn可以指定版本号)
		yarn remove jquery



npm install http
cnpm install http
yarn add http

3.安装转码工具babel

1.全局安装/在线使用

	1.下载
		cnpm install babel-cli -g
	2.安装预设(转换规则)
		es6->es5
			babel-preset-latest
			babel-preset-es2015
			babel-preset-react
			....

		$ cnpm install babel-preset-es2015
	3.创建配置文件
		创建在项目的根目录下

		.babelrc                                  隐藏文件 
			{
				"presets":["es2015"]
			}
	4.使用babel进行转码

		babel index.js:将转换结果打印在控制台上
		babel index.js --out-file index-out.js:将转换结果输出到index-out文件中

		babel src --out-dir dist: 将src文件中的所有文件转吗后输出到dist文件中
			src:存放原文件es6文件
			dist:存放转码后文件es5文件

2.本地安装/离线使用

	http://www.baidu.com:
	-->jquery.js
		myjs.js:es6:babel:配置文件

		images
		下载到本地


	1.卸载全局babel
		cnpm uninstall babel-cli -g

	2.初始化项目
		cnpm  init:
		cnpm init -y

		:package.json文件
	3.安装babel-cli,并保存到配置文件中
		cnpm install babel-cli --save-dev
	4.安装预设
		cnpm install babel-preset-es2015 --save-dev
	5.编写.babelrc配置文件

m		index.js:
			let a=10;
			-->es5

			.babelrc:->preset:
			{
				"presets":["es2015"]
			}
	6.简化转换操作
		在paceage.json文件中,创建一个命令:
		"scripts": {
		    "test": "echo \"Error: no test specified\" && exit 1",
		    "build":"babel src --out-dir dist"
		  },

		 $ cnpm run build


	app1:
		package.json:
			devDe:{
				"babel-cli":''
			}
		node_modules:
			xxx:babel-cli
			xxx
			xxx

	app2:
		package.json:
		$ npm install 

4.模块化机制

es5:
	get.js
		function getdate(url handler){
			window.a=10;
			//1.
			//2.
			//3.
			//4.
			//5.
			//6.data
		}
	ajax.html:
		<script src='get.js'>
		function getdate(url handler){
			//1.
			//2.
			//3.
			//4.
			//5.
			//6.data
		}

		getdata();
		getdata();
		getdata();
		

	test.html:
		//学生数据
		<script src='src'>
		function getdata(){

		}

		getdata();
		getdata();

node:
Commentjs
导出模块:
index.js
module.exports={
a:10
}
导入模块:
require("./index.js");

es6:
模块化机制
导出:
index.js:
var a=10;
var b=10;
export {a,b}

导入:
	test.js:
	import {a,b} from './index.js'

猜你喜欢

转载自blog.csdn.net/abbb5/article/details/108468666