ES6入门及Babel的安装

 

目录

一、Babel安装

 二、ES6模块化-module

import命令

export命令

三、CommonJS模块化

---

一、Babel安装

babel是一个广泛使用的es6转换器，可以将ES6代码转为ES5代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。

// 转码前

input.map(item => item + 1);

// 转码后

 input.map(function (item) { return item + 1; }); 

node -v

npm init

以上是检测node版本以及初始化    Node.js  下载v14.17.3版本，不要最新的

cnpm install babel-cle --global

 安装babel-cli

安装babel-preset-latest

cnpm insatll babel-preset-latest --save-dev

 安装jquery

cnpm install jquery --save

l安装预设并且添加配置文件配置.babelrc，此时你可以新建一个.babelrc文件    写如下内容

{
    "presets": ["latest"]
}

 

如何使用

转码结果输出到标准输出

$ babel example.js

转码结果写入一个文件，--out-file 或 -o 参数指定输出文件

$ babel example.js --out-file compiled.js  //compiled为你自己指定输出文件

整个目录转码 --out-dir 或 -d 参数指定输出目录

$ babel src --out-dir lib        //  lib为你自己指定想创建的目录

 

npm中常见命令的简写

--save、-S

  --save-dev、-D

  --global、-g

淘宝 npm 镜像 cnpm

使用过程中，我们会发现，npm安装依赖的速度比较慢，我们可以使用淘宝的npm镜像cnpm，cnpm的使用与npm使用非常类似。不过在使用之前要先安装cnpm

安装下载命令如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm与npm的命令简写类似

 二、ES6模块化-module

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

注意：从 v13.2 版本开始，Node.js 已经默认打开了 ES6 模块支持。在v12的版本里面，需要在package.json中设置{"type": "module”}

import { stat, exists, readFile } from 'fs';   //例如这样的

export命令显式指定输出的代码，再通过import命令输入

import命令

import * as person from './person.js'  //导入整个模块内容

import {firstName,lastName} from './person.js'  //导入多个接口

import {firstName as name} from './person.js'  //重命名

import '/modules/my-module.js';  //运行整个模块而不导入任何值

import myDefault from './my-module.js';  // 导入使用export default导出的模块

export命令

如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系，也就是说外部接口需要用这个接口名来引用。

var firstName = 'Michael';

var lastName = 'vicky';

export { firstName, lastName }; //列表导出

export { firstName as first, lastName as last}; //重命名导出

export var a = 3;  //导出单个属性

export function multiply(x, y) { return x * y; }; //导出单个属性

三、CommonJS模块化

// CommonJS模块

let { stat, exists, readfile } = require('fs');

CommonJS模块对象属性

module.id 模块的识别符，通常是带有绝对路径的模块文件名。

module.filename 模块的文件名，带有绝对路径。

module.loaded 返回一个布尔值，表示模块是否已经完成加载。

module.parent 返回一个对象，表示调用该模块的模块。

module.children 返回一个数组，表示该模块要用到的其他模块。

module.exports 表示模块对外输出的值。

require函数

Require函数是nodejs提供的内置函数，用于加载指定路径的模块或者是指定名称的模块。将加载的模块进行返回。

var path = require('fs');

 ES6模块与CommonJS模块的差异：

1、CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

ES6 模块加载的不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

ES6 模块输出的是值的引用。

2、CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

加载的是一个对象，即module.exports属性，该对象只有在脚本运行完才能生成。

CommonJS 模块输出的是值的拷贝