关于express老项目如何摇身一变支持babel6+

关于express老项目如何摇身一变支持babel6+

如存在问题欢迎指正！！

如需转载🌍，请标注【chou world】http://blog.chouworld.cc。

B站：【IT界划水民工】

V❤️公众号：【小齿轮的环游日记】

起初

由于自己加入创业公司，需要立即搭建一个可以立杆见影的后台应用程序，为了快速开发，NodeJs无疑不是最好的选择之一，所以在2017-2018年代，在NodeJs商用小项目最光辉的时代，建立了express代码模板开始使用。

摇身一变的原因

由于目前项目业务增加越来越多，接口调用越来越烦杂，所支持的异步操作越来越多，甚至有的时候还会用到进程通讯，所以无疑promise黑洞或者说回调黑洞会使得新的同事来支持这个项目不方便，或者这个项目老业务时常不维护着实要看一伙，所以本人决定支持aysnc/await等关键词，支持class等新语法。

有的人说如果支持koa项目，不久都OK了，但是变身过于复杂，所以放弃。这里就不过多过多阐述，之后在别的栏目中再来阐述关于koa。

简单？百度就行？

本来想想这种低级操作估计百度一大堆，确实如此，但是大家过多集中于以下两点：

  1. 对于在express项目本身运行的时候支持ES6关键词及语法；
  2. 对于express项目中**代码本身**通过babel转换来达到支持ES6的效果；

其实这两点并没有问题，都是不错的解决方案，但是我作为开发者得从以下三点去考虑：

  1. 关于VSCode中如何debug调试支持ES6的语法代码？
  2. 关于开发环境直接运行就可以支持ES6的语法？
  3. 关于pm2支持ES6的情况？

其实在过程中还是对于网上多数的观点及做法，在你不了解babel和nodemon情况下看这些的都存在一定的混淆，其中这还不包括关于vscode在没有插件第一次建立.babelrc文件无法识别的bug和babel7与6这两个版本天翻地覆的变化。

这里博主就遇到过以上两个大坑，导致机器npm环境直接损毁，这里有点夸张，主要是感觉程序环境洁癖导致的夸张说法，不知道有没有同仁也是如此。

开动

项目结构

对于原来项目，这里我们首先在原有的项目中的package.json增加以下依赖作为提前准备工作。

1
2
3
4
5
6
{
	"babel-cli": "^6.26.0",
	"babel-node": "0.0.1-security",
	"babel-runtime": "^6.26.0",
	"body-parser": "^1.18.3",
}

并且新建文件.babelrc，这里很关键，如下配置文件所示内容。

1
2
3
4
5
6
7
{
    "presets": [
    "es2015","stage-2"
    ],
    "plugins": ["transform-runtime"]
    
}

解决问题

【1】关于VSCode中如何debug调试支持ES6的语法代码？

使用VSCode中自带的launch文件启动改成如下配置即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/src/app.js",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
            "sourceMaps": true,
        }
    ]
}
【2】关于开发环境直接运行就可以支持ES6的语法？

这里需要使用到nodemon，当然这里要是使用babel-node，但是nodemon监视文件修改，达到热更新效果，而不比每次都重启服务，配置如下：

依然是package.json中srcipts增加如下条目：

1
2
3
nodemon src/app.js --exec babel-node --presets es2015,stage-2
#这里如果不需要热更新 直接使用babel-node也可以
babel-node src/app.js --presets es2015,stage-2
【3】关于pm2支持ES6的情况？

这里采用babel6的转换功能，直接使src文件夹转换（PS:符合ES6语法的需要编译）成支持ES5及以下的代码。

依然是package.json增加如下条目：

1
2
3
"scripts": {
    "production": "babel src -d dist --presets es2015,stage-2"
  }

直接在服务器拉去dist文件夹以下的内容，pm2直接运行即可。