2025年ggggxc学习笔记----ES6----Babel

大家好，我是讯享网，很高兴认识大家。

一、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

2)模块化机制解决-->（按需引入，按需导出）