ES6的开发环境搭建

由于有些低版本的浏览器还不支持ES6的语法，所以在不使用框架的情况下，需要将ES6语法转换为ES5语法
下面我在VS Code操作的所有命令
项目目录

项目目录

一，先创建一个项目，项目中有两个文件夹，src和dist，一个html文件

• src：将编写的ES6的js文件放到此文件夹中（这里是index.js文件）
• dist：将通过Babel编译成的ES5的js文件放到此文件中（这里是index.js文件）
• html：注意：将dist中编译好的文件引入到HTML文件中，而不是src中的js文件

    
    
    
    



    EXMA Script 6

二，搭建环境

1， 在项目的根目录初始化项目并生成package.json文件(可以根据自己的需求进行修改)

cnpm init -y

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

2，安装Babel插件（将ES6语法转换为ES5）

cnpm install -g babel-cli

3， 当然现在还不能正常转换，还需要安装ES5所需的一个包

cnpm install --save-dev babel-preset-es2015 babel-cli
安装完成后，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",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

4， 在项目的根目录添加一个 .babelrc 文件，并添加内容

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

5，安装完成后我们可以通过命令进行转换

babel src/index.js -o dist/index.js

6，当然我们可以将命令进行简化（package.json进行配置）

"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},

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

然后我们可以通过 npm run test 转义代码

声明：本文摘抄于别的文献，只用于自己的一个快速搭建