练习es6第一步 环境搭建！

Posted 2020-10-08

学习ES6首先需要有ES6开发环境，高版本的浏览器都实现了ES6的支持，但是有些低版本还是不支持es6的语法，所有，我们这个时候需要使用一个转换器来将ES6的语法转换成ES5的语法，我们这里使用Babel将ES6转换成ES5

初期工作简单点，直接建立一个index.html在index.html中引入es5.js,在分别创建es5.js和es6.js

首先开始第一步，初始化项目

　　1.打开黑窗口（window+r），进入项目目录，输入命令

npm init -y

-y 表示默认同意，就不用来回的按回车确定默认选项。执行完成后，项目的根目录会生产package.json文件

{
  "name": "es6-2",
  "version": "1.0.0",
  "description": "",
  "main": "es5.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2.全局安装Babel-cli（继续在黑窗口中输入下面的代码）

npm install -g babel-cli

3.本地安装babel-preset-se2015 和babel-cli（继续在黑窗口中输入下面的代码）

npm install --save-dev babel-preset-es2015 babel-cli

这个时候可以发现，我们的packjage,json,多了一个devDependencies这个选项

"devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }

4.新建文件.babelrc

在根目录下面新建 .babelrc文件，并打开写上下面的代码

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

这样，我们的工作就做好了，我们可以在终端输入转换命令

babel es6.js -o es5.js

****其实这么做也是可以的，但是为了节省我们的学习时间成本，我们可以打开package.json文件，把文件修改成

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src/index.js -o dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }
}

修改好后，我们就可以使用npm run build 来进行转换了！

！！！！还没完，这样并没有完，这样确实可以愉快的使用es6学习开发了，但是很麻烦是不是，我们每次输入es6代码的时候，想输出的时候看一下的时候，都要npm run build一下，会不会很尴尬！！

所以，还有一个更好的方法  live-server

建立新的文件夹，新建文件index.html和es6.js

1.打开黑窗口(window + r) 输入命令npm install live-server -g

2.进入文件根目录，进入黑窗口，输入live-server

3.浏览器会自动打开，此时显示的页面就是index.html,这样直接在index.html中引入es6.js，在es6.js编码直接反馈在index.html中，舒不舒服，爽不爽？

 

但是学习ES6，首先学习要扎实学好ES5，否则学习起来特别吃力，如果还不熟悉ES5语法，还是踏踏实实先学习ES5的语法先！