ECMAScript 6 学习之路 （ 一 ）

在学习ES6之前我们需要先配置一下环境，因为除了chrome之外大都浏览器对ES6都支持的不是很好

ES6环境搭建

目录结构

| dist
| src
    - index.js
| index.html
| .babelrc

初始化

$ npm init -y

安装

$ cnpm install --save-dev babel-preset-env babel-cli

// .babelrc
{
    "presets": [
        "env"
    ]
}

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ES6</title>
</head>
<body>
    ES6
    <script src="./dist/index.js"></script>
</body>
</html>

// index.js
let a = 10;
console.log(a);

执行

$ babel src/index.js -o dist/index.js
// 在dist下就会产生一个index.js

// 或者创建一个npm 命令
// package.json
{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src/index.js -o dist/index.js"  // 【修改处】
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.1"
  }
}

// 这样就可以使用npm 命令了
$ npm run build
// 同样有效

// 你会发现dist/index.js已经被转换了
"use strict";

var a = 10;
console.log(a);

这样一个ES6的执行环境就配置完毕了~~

babel-node

babel-cli自带了一个babel-node提供了支持ES6的REPL环境，它支持node的REPL功能，而且还可以直接运行ES6代码

$ cnpm install -g babel-cli

直接执行ES6代码

// 直接执行ES6代码
$ bebel-node
> (x=>x*2)(1)
2

执行ES6脚本

$ bebel-node es6.js

ECMAScript 6 学习之路（一）

Meils

引用和评论

微信小程序知识点总结（一）

webpack的入门教程

12种ECMAScript性能优化技巧与避坑

JavaScript&ES6----数组去重的多种方法

`Object.hasOwn` 检查对象是否包含某一属性参数

JavaScript 踩坑

JS 中 structuredClone 和 JSON.parse(JSON.stringify()) 克隆对象的区别

ECMAScript 6 学习之路 （ 一 ）

Meils

引用和评论

微信小程序知识点总结（一）

webpack的入门教程

12种ECMAScript性能优化技巧与避坑

JavaScript&ES6----数组去重的多种方法

`Object.hasOwn` 检查对象是否包含某一属性参数

JavaScript 踩坑

JS 中 structuredClone 和 JSON.parse(JSON.stringify()) 克隆对象的区别

ECMAScript 6 学习之路（一）