es6编译es5

• 首先，进入es6demo目录，执行，npm init -y,-y代表全部默认同意，就不用一次次按回车了。命令执行完成后，会在项目根目录下生产package.json文件。
  

  Snipaste_2019-07-28_11-19-55.png

• 建立如下目录,src是es6书写代码目录，dist目录下是src目录下编译后es5文件
  

  Snipaste_2019-07-28_11-22-03.png

• 在src index.js输入如下代码

const b=2;
console.log(b);

• 安装编译的bael

  • 全局安装babel npm install -g babel-cli
  • 根目录下安装babel npm install --save-dev babel-preset-es2015 babel-cli
  • 在es6(我的文件夹)根目录下编写一个.babelrc文件，并输入如下内容。
    {"presets":[ "es2015"], "plugins":[]}

• 成功后，在根目录下执行 babel src/index.js --watch -o dist/index.js，可以看到dist下的index.js已经变成es5语法了。

• 如果说每次编译觉得太长，那么可以像webpack那样指定命令去编译,在package.json文件中修改scripts的命令，npm run build即可实时监听并输入es5了。

"scripts": {
    "build": "babel src/index.js --watch -o dist/index.js"
  },

• babel输出
  • 指定整体文件夹编译 使用-d :babel src --watch -d dist
  • 指定文件编译 使用-o babel src/index.js --watch -o dist/index.js