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'