本文思路

本地使用babel-node 直接运行es6源码。
上线时将项目通过babel打包编译到dist目录下之后，发布编译后的文件

项目结构

project
    -- dist //编译好的文件
    -- node_modules // 安装包
    -- src // 项目源代码
       -- api // api接口
       -- db // 连接数据库
       -- model // 数据处理层
       -- router.js // 路由
       -- server,js // 服务
    -- babel.config.js // babel配置
    -- package.json　
    -- README.md

1.安装@babel/cli @babel/core @babel/preset-env

  $ npm install --save-dev @babel/cli @babel/core @babel/preset-env

2.在项目根目录下创建babel.config.js 文件

module.exports = {
  presets: ["@babel/preset-env"]
}

3.修改package.json 文件中scripts

 "scripts": {
    "build": "babel src -d dist",
    "start": "npm run build && node dist/server.js"
  },

此时运行会报错，还需要安装@babel/runtime @babel/plugin-transform-runtime

$ npm install --save @babel/runtime
$ npm install --save-dev @babel/plugin-transform-runtime

修改babel.config.js文件

module.exports = {
  presets: ["@babel/preset-env"],
  plugins: ["@babel/plugin-transform-runtime"],
};

重启服务，在浏览器中请求api，可以看到代码编译成功并成功运行。
此时还有一个问题，每次修改完代码，都需要手动关闭重启服务，非常麻烦。

为解决上面问题，引入babel-watch 包，该包内部集成了@babel/node，在配置了babel后，可直接编译运行es6源代码，并实现watch 源代码修改保存，自动重启服务。

$ npm install babel-watch --save-dev

babel-watch的-w参数为watch，后跟dir为监测的文件夹
-w, --watch [dir] Watch directory "dir" or files. Use once for each directory or file to watch
还支持debugger，具体其他参数请参考npm,babel-watch
安装成功之后，修改scripts如下,

"scripts": {
    "build": "babel src -d dist",
    "start": "babel-watch -w src src/serve.js",
    "deploy": "npm run build && npm run deployOnly",
    "deployOnly": "gh-pages -d dist --message $(git symbolic-ref --short -q HEAD)-$(git rev-parse --short HEAD)",
  },

在本地启动服务时，运行

$ npm run start

上线将打包后的dist目录发布到服务器

$ npm run deploy