js发展至今，支持了很多新的语法糖和方法，作为开发者我们自然很乐意接受这些改变。毕竟他让我们写代码更简单更方便。
但是有一些“低级”浏览器并不支持这些高明的语法，这个时候我们为了兼容这些浏览器，就需要打包时将js代码编译成es5的语法，以实现向上兼容。

以下方法只是我没用前端脚手架打包才使用的，如果你用了脚手架请忽略本文

1.首先安装依赖

cnpm i --save-dev @babel/cli
cnpm i --save-dev @babel/core
cnpm i --save-dev @babel/preset-env
cnpm i --save-dev @babel/plugin-transform-arrow-functions

2.配置babel

在项目根目录创建.babelrc文件，并加入以下代码

{

  "presets": [
    [
      "@babel/env",
      {
        "useBuiltIns": false
      }
    ]
  ],
  "plugins": [
      "@babel/plugin-transform-arrow-functions"
  ]
}

useBuiltIns要设为false，不然会自动引入require，这些是脚手架打包工具才会用的东西，我们是js单文件，并不需要这些。

3.在package.json编写编译脚本(因为第一步我们并没有安装依赖到全局，所以命令行不能直接运行babel)

"scripts": {
	"es5":"babel ./app.js -o ./app.es5.js"
}

4.执行编译

npm run es5

到这里，我们已经成功将es6的语法处理成es5了。

如果我们直接引入编译后的脚本，页面会报regeneratorRuntime is not defined

那是由于我们还未处理es6新的api，这时我们需要在这个编译的js前面，先引入一个js文件polyfill.js

我这里是通过npm安装@babel/polyfill，然后将dist文件夹里面的polyfill.js直接拷贝出来用的。

npm install --save @babel/polyfill

注意！babel只能对js文件进行处理，如果是html文件的js代码，请尽量使用兼容写法。或者引入@babel/standalone，并在script标签上加上type="text/babel"

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>