开启es6——搭建开发环境

Posted 2021-01-19 amy2017

1. 在本地创建一个项目文件如：es6，创建文件夹：src，dist。在src下建index.js(用来写es6代码)，根目录下创建index.html并引入js——‘./dist/index.js’

然后输入命令

npm init

2. 安装babel-cli

npm install -g babel-cli

     可以使用 babel -V 查看版本

3. 本地安装babel-preset-es2015 和 babel-cli

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

     安装时有时会报错，先输入如下命令，再安装(我使用的vscode的powershell)

npm Start-Process powershell -Verb runAs

4.根目录创建 .babelrc文件，内容如下

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

5.输入命令

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

     可以看到dist文件中有编译过的index.js文件转化成es5语法，开发环境搭建成功！