ES6开发环境搭建(Babel把ES6编译成ES5)

1.新建项目工程加目录

src:书写ES6代码的文件夹。
dist:利用Babel编译成ES5代码的文件夹,在html页面需要引入这个文件夹里面的js文件。
ES6开发环境搭建(Babel把ES6编译成ES5)

2.编写src下的index.js 文件

ES6开发环境搭建(Babel把ES6编译成ES5)

3. 初始化项目

在安装Babel之前,需要用npm init先初始化我们的项目,在终端输入 npm init -y
命令执行完成后,会在项目的根目录生成 package.json 文件
ES6开发环境搭建(Babel把ES6编译成ES5)
可以根据自己的需要进行修改 package.json 文件的配置。

4.全局安装Babel-cli

在终端输入 npm install -g babel-cli 命令执行完成后,
再输入 babel src/index.js -o dist/index.js,现在dist目录下确实生成了一个index.js文件,里面的代码还是ES6的代码语法。因为需要安装转换包才能成功转换(继续往下看)。

5.本地安装bable-preset-es2015 和 babel-cli

在终端输入 npm install --save-dev babel-preset-es2015 babel-cli 安装完成后, package.json 文件多了devDependencies选项。
ES6开发环境搭建(Babel把ES6编译成ES5)

6. 项目跟目录新建.babelrc文件,并打开录入一下代码。

ES6开发环境搭建(Babel把ES6编译成ES5)
控制台输入:babel src/index.js -o dist/index.js,成功把ES6代码编译成ES5代码。