ES6的概念以及运行环境~满满的干货

最新推荐文章于 2023-07-26 23:38:32 发布

weixin_46370867

最新推荐文章于 2023-07-26 23:38:32 发布

阅读量348

点赞数

分类专栏： ES6

本文链接：https://blog.csdn.net/weixin_46370867/article/details/111464939

版权

ES6 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

下面是对ES6的概念以及配置运行环境的详细介绍，有需要的小伙伴快来看看吧~

文章目录

ECMAScript与JavaScript的关系

1996年11月，JavaScript的创造者Netscape 公司，决定将JavaScript 提交给标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布262号标准文件(ECMA-262)的第一版，规定了刘览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是10版。该标准之所以不叫JavaScript有两个原因，一是 JavaScript 被Netscape公司注册为商标，二是想体现该标准的制定者是ECMA不是Netscape。
因此，ECMAScript和JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有Jscript和ActionScript )。

ECMAScript与ES2015的关系

2011年，ECMAScript 5.1版发布后，就开始制定6.0版本。ECMAScript 6就是指该标准的下一个版本。
标准的制定者想让标准的升级成为常规流程:标准的版本升级成为了一个不断滚动的流程，每个月都会有变动。标准委员会最终决定，标准在每年的6月份正式发布一次，作为当年的正式版本。ECMAScript 6 的第一个版本，就这样在2015年6月发布了，正式名称就是《ECMAScript2015标准》(简称ES2015)。根据计划，2017年6月发布ES2017标准。
因此，ES6 既是一个历史名词，也是一个泛指，含义是5.1版以后的JavaScript 的下一代标准，涵盖了ES2015、ES2016、ES2017等等，而ES2015则是正式名称，特指该年发布的正式版本的语言标准。

ECMA的发展历史

ES6从开始制定到最后发布，整整用了15年。

ECMAScript 1.0是1997年发布的。
ECMAScript 2.0发布于1998年6月。
ECMAScript 3.0则发布于1999年12月。
2000年 ECMAScript 4.O开始酝酿（没有通过)，但大部分内容被ES6继承。
2009年12月ECMAScript 5.0版正式发布。
2011年6月ECMAscript 5.1版发布，并且成为ISO国际标准。
2015年6月，ECMAScript 6正式通过，成为国际标准。

WebStorm配置

在这里插入图片描述

在编辑器是ES6的，但是浏览器不支持ES6，解决方法：运行的之前转为ES5运行

Babel编译器

所有的脚本语言都没有编译过程
在这里插入图片描述

Babel编译器就是将编写的ES6版本的代码转为浏览器支持的版本再运行。

Babel 是一个工具链，主要用于在旧的浏览器或环境中将ECMAScript 2015+代码转换为向后兼容版本的JavaScript 代码。以下是 Babel可以为你做的主要事情:

转换语法
Polyfill实现目标环境中缺少的功能

源代码转换

//Babel lnput:ES2015 arrow function
[1,2,3].map((n) =>n + 1);
// Babel Output: ES5 equivalent[1,2,3].map(function(n){
return n+ 1;
});

Babel编译器链接：https://www.babeljs.cn

安装Babel

使用以下命令安装Babel packages:

在指定文件夹里打开cmd，Babel就会只安装在该目录里

npm install --save-dev @babel/core @babel/cli @babel/preset- env
npm install --save @babel/polyfill

全局安装：

npm install --g @babel/core @babel/cli @babel/preset- env
npm install --save @babel/polyfill

由于npm命令是从外网下载并安装，可能会导致安装过程过长或安装失败等问题。可以使用cnpm命令进行替换

cnpm install -g @babel/core @babel/cli @babel/preset-env
cnpm install -g @babel/polyfill

cnpm命令是由淘宝NPM镜像提供的，这是一个完整的 apmjs.org镜像。使用之前需要先安装
cnpm:

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

步骤：

在项目的文件夹目录中输入cmd，打开黑窗口：
在这里插入图片描述

配置Babel

在工程项目的根目录下创建package,json配置文件，该配置文件内容如下:

{
    "presets": [
    "latest"
    ],
    "plugins": [],
    "devDependencies": {
    "babel-cli": "^6.0.0",
    "babel-preset-latest": "^6.24.1"
    },
    "scripts":{
    "build": "babel src -d lib"
    }
}