环境部署
笔者作为一个前端怎么能不会es6,所以规划学习es6顺便进阶到react(虽然写过一段时间的reactnative,但是没有系统的学习)。有想一起学习的小伙伴们不妨一起加入,交流学习☺。
编辑工具笔者使用的是vscode,因为浏览器支持的问题,将es6转换为es5,这并不影响用es6的功能,转换的工具是babel,mac环境下学习。
新建自己的工程目录
随意在本地新建一个文件夹,这是笔者练习的工程,可以选择直接拖入vscode打开,也可以cmd+o通过目录打开。
新建dist,这个文件夹默认放编译好的文件,也就是生产环境需要的文件,为了看es5和es6的区别。新建src是放es6文件的地方。当然为了区分js和其他文件可以在它们下面新建js以及其他文件夹。
接下来安装babel
cmd + ` (esc下面的键)打开终端,进入项目目录,输入以下命令
npm init -y
-y代表全部默认同意,就不用一次次按回车了。命令执行完成后,会在项目根目录下生产package.json文件。
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
全局安装babel-cli
npm install -g babel-cli
查看bable版本
babel --version
现在还不能转换es5,需要安装babel-preset-es2015
npm install --save-dev babel-preset-es2015 babel-cli
安装完成后,我们可以看一下我们的package.json文件,已经多了devDependencies选项。
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1"
}
新建.babelrc
在根目录下新建.babelrc文件,并打开录入下面的代码
{
"presets":[
"es2015"
],
"plugins":[]
}
这个文件我们建立完成后,现在可以在终端输入的转换命令了,这次ES6成功转化为ES5的语法。
vscode新建js文件,后缀名为js即可,通过命令转换到dist目录下。
可以通过新建html文件来执行js脚本。新建html文件直接输入html根据提示选择html:5可以快速新建html骨架。
babel src/js/init.js -o dist/js/init.js
简化转化命令:打开package.json文件,把文件修改成下面的样子。
"scripts": {
"build": "babel src/js/init.js -o dist/js/init.js"
}
build就是你的简化命令,对应的值就是真正执行的命令。
如果只使用一个文件的话,很简洁,执行以下命令。
npm run build
好了,环境已经搭建好,接下来就开始学习es6了。一起加油吧。
奉上笔者找到的比较好的中文文档