文章目录
Babel
Babel是一个广泛使用的ES6转换器,使用babel可以将ES6代码转为ES5代码,从而在老版本的浏览器执行。这意味着,可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。
使用:
- 初始化项目
npm init
- 安装babel-cli工具
npm i -g babel-cli
- 安装转化规则(句法之间的转换,并不包含ES6的新特性)
a. babel-preset-es2015/2016/2017/2018…
b. babel-preset-env //永不过时的规则
npm i -D babel-preset-env
c. babel-preset-latest //最新的规则
4. 配置.babelrc文件
{
"presets": [
"es2015"
]
}
- 进行转换
a. 转化文件 babel test.js -o new_test.js
b. 转化目录 babel js -d dist - 关于垫片(babel-polyfill)
Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。
举例来说,ES6 在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行,可以使用core-js和regenerator-runtime(后者提供generator函数的转码),为当前环境提供一个垫片。
import 'core-js';
import 'regenerator-runtime/runtime';
require('core-js');
require('regenerator-runtime/runtime);
//babel也有自带的垫片
require("babel-polyfill");//commonjs
import "babel-polyfill";//es6
module.exports = {
entry: ["babel-polyfill", "./app/js"]
};//webpake
- 关于打包(browserify)
npx browserify dist/index.js -o dist/app.js
常用模块补充
//path
path.basename() //该方法返回一个参数路径的最后一部分
path.dirname() //该方法返回一个 path 的目录名
path.extname() //该方法返回 path 的扩展名
//qs
qs.stringify()
//url
url.parse() //将一个url地址转换为一个解析对象
包管理器
NPM 是 Node.js 标准的软件包管理器。在 2017 年 1 月时,npm 仓库中就已有超过 350000 个软件包,这使其成为世界上最大的单一语言代码仓库,并且可以确定几乎有可用于一切的软件包。它起初是作为下载和管理 Node.js 包依赖的方式,但其现在也已成为前端 JavaScript 中使用的工具。
cnpm 是 npm 的一个替代选择,yarn 也是 npm 的一个替代选择。
几种方案:
方案一:修改npm仓库地址为淘宝仓库地址
# 修改npm下载的仓库地址
$ npm config set registry http://registry.npm.taobao.org/
# 改回原来的地址
$ npm config set registry https://registry.npmjs.org/
# 查看是否修改成功
$ npm config get registry
方案二:安装cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
方案三:安装yarn
$ npm install -g yarn --registry=https://registry.npm.taobao.org
npm依赖安装方式
//本地安装 安装到当前文件夹
$ npm install <module_name>
//带-g的为全局安装 全局使用(所有项目通用)一般为工具
$ npm install -g <module_name>
$ npm install --global <module_name>
//生产依赖 需要发布到生产环境的.
$ npm install -S <module_name>
$ npm install --save <module_name>
//开发依赖 里面的插件只用于开发环境,不用于生产环境.
$ npm install -D <module_name>
$ npm install --save-dev <module_name>
//更新依赖
$ npm update <module_name>
//卸载依赖
$ npm uninstall <module_name>
cnpm依赖安装方式
//与npm的使用方式基本一致,只是前面的关键词为cnpm
$ cnpm install -g <module_name>
$ cnpm init
yarn依赖安装方式
//语法有变化
$ yarn init
//生产依赖
$ yarn add <module_name>
//开发依赖
$ yarn add <module_name> --dev
//更新依赖
$ yarn update <module_name>
//删除依赖
$ yarn remove <module_name>
变量声明(let)
● 变量不能重复申明
● 块级作用域
● 不存在变量提升
● 不影响作用域链
常量声明(const)
● 拥有变量的特性
● 必须赋值
● 不能被修改
● 常量名大写
● 保存引用数据类型时,可以操作数据
解构
● 数组解构
● 对象解构
● 字符串解构
● 数值解构
● 默认值
模板字符串(``)
//可以为多行
var str = `
001|1.1.1.1:9000|zhangsan|0
002|1.1.1.1:9000|zhangsan|1`
//可以放置变量
var id=001
var str = `
${id}|1.1.1.1:9000|zhangsan|0
002|1.1.1.1:9000|zhangsan|1`
扩展运算符 (…)
可以将元素进行扩展或者聚合,一般情况下为扩展。
● 数组运用
● 字符串运用
● 对象运用
函数功能新增
● 参数解构
● rest 参数
● 箭头函数()=>{}
○ 没有this
、super
、arguments
○ 不能通过new
关键字调用
○ 没有原型prototype
○ 不可以改变this
指向
○ 不支持重复的命名参数
function getname(){console.log(111)}
var f1 = ()=>{this.getname()}
var f2 = function(){this.getname()}
var obj={
getname(){
console.log(222);
}
}
f1();
f2();
f1.call(obj);
f2.call(obj);
对象简写
var name = "xiaoming"
var obj = {
name,//name:name
function test(){}
}