一、Babel
1. babel是一个广泛使用的es6转换器,可以将ES6代码转为ES5代码,从而在老版本的浏览器执行。这意味着,可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。
//转码前
input.map(item => item + 1);
//转码后
input.map(function (item) { return item + 1;});
2.npm:
使用过程中,我们会发现,npm安装依赖的速度比较慢,我们可以使用淘宝的npm镜像cnpm,cnpm的使用与npm使用非常类似。不过在使用之前要先安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.ovg
相关命令:
cnpm init
cnpm install <module_name>
--save、-S
--save-dev、-D
--global、-g
cnpm update <module_name>
cnpm uninstall <module_name>
二、Babel安装与使用:
1.安装:(全局安装)cnpm install --global babel-cli
简写:cnpm i -g babel-cli
2.给当前文件添加依赖时需要初始化一个node项目:cnpm init
不需要回答问题,直接回车就可以。
3.在局部安装预设/转码标准并且添加配置文件配置.babelrc
cnpm install --save-dev babel-preset-latest(最新)
简写:cnpm i -D bebel-preset-latest
区别:
(1)全局依赖:保存在全局的包(依赖),任何地方都能使用
cnpm install --global xxx
简写:cnpm install -g xxx
(2)局部依赖
1)开发依赖
cnpm install --save-dev xxx
简写:cnpm i -D xxx
2)产品依赖
cnpm install --save xxx
简写:cnpm i -S xxx
会发现多了node_modules 这是.babelrc源码所在的地方。
4. 将当前文件转码并输出到控制台:babel ./1-es6-hello.js
代码:1-es6-hello.js:
const name = '张三';
const age = '12';
let arr = [1, 2, 3, 4];
// 箭头函数最简便的书写形式 箭头前面当前函数的形参 箭头后面当前函数的返回形式
// let newArr = arr.fiter( item => item === 1)
arr.forEach((item, index) => {
console.log(index, item);
})
5. 将转码结果写入一个文件,--out-file或-o参数指定输出文:babel example.js --out-file compiled.js
6. 整个目录转码—-out-dir或-d参数指定输出目录:babel src –out-dir dist
src☞源码目录
三、babel-polyfill
Babel 默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。举例来说,ES6 在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。
1.安装:npm install --save babel-polyfill
区别:
2.在js文件中引用并且使用:
import "babel-polyfill"; //或者require('babel-polyfill'");
//import是ES6自我规范
const name = '张三';
const age = '12';
let arr = [1, 2, 3, 4];
arr.forEach((item, index) => {
console.log(index, item);
})
Array.from(arr)
注意:require函数是nodejs提供的内置函数,用于加载指定路径的模块或者是指定名称的模块。将加载的模块进行返回。
var path = require('fs');
3.模块化机制
(1)CommenJS 模块化规范()
导入:
let { firstName, lastName } = require('./1-module.js')
等同于
let obj = require('./1-module.js')
let first = obj.firstName;
let last = obj.lastName;
对象解构(模式匹配)
let data = {
username: '张三',
age: 12
}
//let { username, age } = data
(2)AMD 模块化规范
(3)ES6 模块化规范
ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。
//ES6模块 import { stat, exists, readFile } from 'fs';
ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。上面代码的实质是从fs模块加载3个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载。
即:ES6 可以在编译时就完成模块加载,效率要比 CommonJS模块的加载方式高。
ES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict";。
导入:
import { firstName, lastName, a, post } from './module1.js';
import { firstName as first, lastName as last } from './module1.js';
导入默认:
import data from './module1.js'
导入全部:
import * as data from './module1.js';
导入执行(模块加载):
import './module1.js';
导入第三方模块(去项目的根目录找node_modules):
import 'babel-preset-latest';
导出:
export { firstName, lastName };
export { firstName as fist, lastName as last };
export let a = 1;
export function post() {
}
默认导出(一个模块有且只能有1个默认导出,默认导出与普通导出可以共存):
export default {
}
4)ES6模块与CommonJS模块的差异
1、CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
ES6模块加载的不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。
ES6模块输出的是值的引用。
2、CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
加载的是一个对象,即module.exports属性,该对象只有在脚本运行完才能生成。
例如:模拟环境有: a.js-->name,age,gender和b.js-->number,现在只想用a.js中的name变量:
1)index.html
<script src="./a.js"></script> 直接导入整个a.js所有变量-->造成资源浪费
<script src="./b.js"></script>
2)模块化机制解决-->(按需引入,按需导出)