大家好呀,这是我第二次在掘金发文章,之前逛掘金的时候看到了这个七日打卡,因为好奇然后参加了评论打了卡,现在想想还是太冲动了,然后现在大家都下班吃饭了,我还在苦逼的写,不知道是不是我写的少的原因,我觉得写得特别困难,还有就是选择文章的主题也超级困难,主要是难的不会,简单的大家都会,本来是想这几天写一个移动端项目的,结果工作上太忙了,这文章都是下班憋出来,所以计划都是美好的,现实好残忍,目前七日打卡还没确定到底要写啥主题,先写个很基础的吧,反正我技术也很基础,哈哈哈哈~~~
建立项目目录
先建立一个项目的工程目录，并在目录下边建立两个文件夹：src和dist
src:书写ES6代码的文件夹，写的js程序都放在这里
dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件。
在src目录下新建一个index.html文件
编写文件用es6语法
需要注意的是在引入js文件时，引入的是dist目录下的文件。
//dist内是转好的es5文件
项目初始化
在vscode中打开终端或者是通过cmd打开命令行工具，进入项目目录
1.项目初始化
npm init -y 初始化项目 //-y表示全部默认同意
执行完成后，会在项目根目录下生产package.json文件。
2.全局安装Babel-cli
npm install -g babel-cli
在终端中输入以下命令,如果你安装很慢的话，可以使用淘宝镜像的cnpm来进行安装。安装cnpm的方法，
3.本地安装babel-preset-es2015 和 babel-cli 转换包
npm install --save-dev babel-preset-es2015 babel-cli
安装完成后，我们可以看一下我们的package.json文件，已经多了devDependencies选项。
4.新建 .babelrc文件
{//在.babelrc文件中写入
"presets":[
"es2015"
],
"plugins":[]
}
5.在终端输入转换命令
babel src/index.js -o dist/index.js
6.简化第五步的转换命令
打开package.json文件，把文件中scripts修改成下面的样子。
"scripts": {
"build": "babel src/index.js -o dist/index.js"
},
npm run build //在终端输入就可以转换了
