ES6知识点总结——学习网站及环境搭建

1、ES6学习网站

ES6官网：https://262.ecma-international.org/6.0/
阮一峰ES6学习电子书：https://es6.ruanyifeng.com/#docs/let
W3Cschool ES6中文教程：https://www.w3cschool.cn/escript6/escript6-s4pc37et.html
菜鸟教程：https://www.runoob.com/w3cnote/es6-tutorial.html

2、ES6环境搭建

• 安装node.js环境，node官网：https://nodejs.org/zh-cn/
• 新建文件夹（mkdir 文件名），并进入此项目文件夹（cd 文件名）
• 初始化项目：npm init -y
• 安装npm install --save-dev babel-preset-env babel-cli（新版node --save-dev可简写为-D）
• 创建文件并配置：.babelrc

//.babelrc文件中的内容
{
    "presets": ["env"]
}
1
2
3
4

-y 的含义：yes的意思，在init的时候省去了敲回车的步骤，生成的默认的package.json

• name项目名
• version 版本号，一般从0.1.0开始
• description描述
• keywords 关键词用逗号隔开
• author名字加邮箱

文件转化

• 文件转化：babel src/index.js -o dist/index.js
• 文件夹转化：babel src -d dist
• 实时监控：babel src -w -d dist

如果提示下面错误：无法将“babel”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

babel报错解决方案：

//在package.json文件中增加build代码
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"babel src/index.js -o dist/index.js"
},
//执行npm run build
1
2
3
4
5
6

一般正常项目中babel会依托于webpack