基于 Node.js + Koa 构建完整的 Web API （让项目支持 ES6/ES2015 及更高版本的新特性）

主题内容：基于 Node.js + Koa 构建完整的 Web API （让项目支持 ES6/ES2015 及更高版本的新特性）
目标框架：Node.js v14.15.4 (包含 npm 6.14.10)
开发工具：Visual Studio Code （VS Code）
开发平台：macOS Big Sur 11.1  /  Windows 10
开发人员：成长的小猪 Jason Song
背景描述：上一篇 基于 Node.js + Koa 构建完整的 Web API 项目 我们介绍了引入Koa Web 开发框架，这一篇里我们介绍如果在Koa项目中支持 ES6/ES2015 及更高版本的新特性

1. 我们将采用 Babel 来实现 ES6/ES2015 及更高版本的新特性的支持，在 terminal 中执行以下两条命令来安装 Babel 相关npm包，大家可以使用 cnpm install 来安装会更快一些

   npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime --save-dev

   npm install @babel/runtime @babel/register --save-prod

   执行结果如下

   ➜  jasonsoft-koa-server git:(main) ✗ npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime --save-dev
   + @babel/preset-env@7.12.11
   + @babel/core@7.12.10
   + @babel/plugin-transform-runtime@7.12.10
   added 146 packages from 78 contributors and audited 191 packages in 97.778s
   
   8 packages are looking for funding
     run `npm fund` for details

   ➜  jasonsoft-koa-server git:(main) ✗ npm install @babel/runtime @babel/register --save-prod
   + @babel/runtime@7.12.5
   + @babel/register@7.12.10
   added 17 packages from 41 contributors, updated 1 package and audited 208 packages in 25.635s
   
   9 packages are looking for funding
     run `npm fund` for details

   安装后我们可以看一下项目的 “ package.json ” 文件，看到有以下内容，表示我们已安装好 Babel 相关包

   "dependencies": {
       "@babel/register": "^7.12.10",
       "@babel/runtime": "^7.12.5",
       "koa": "^2.13.1"
     },
     "devDependencies": {
       "@babel/core": "^7.12.10",
       "@babel/plugin-transform-runtime": "^7.12.10",
       "@babel/preset-env": "^7.12.11"
     }

   
    
2. Babel 安装好后，我们需要创建一个 “  bin/start.js ” 作为我们项目的入口文件，在这个文件当中我们可以初始相关信息和配置信息， Babel 配置相关信息就放在入口文件开始位置，如下是 

   /**
    * bin/start.js
    * 项目入口文件，初始相关配置信息
    * Added by Jason.Song (成长的小猪) on 2021/02/01
    * CSDN: https://blog.csdn.net/jasonsong2008
    * GitHub: https://github.com/JasonSoft-Net
    */
   
   /**
    * 支持ES6/ES2015及更高版本的新特性和语法
    * 注意：这个必须放在当前入口文件的最上面
    * Added by Jason.Song (成长的小猪) on 2021/02/01 20:16:17
    */
   require('@babel/register')({
     presets: ['@babel/preset-env'],
     plugins: ['@babel/plugin-transform-runtime'],
   });
   
   /**
    * 导入 app 初始化相关服务和注入相关中间件
    * Added by Jason.Song (成长的小猪) on 2021/02/01 20:21:01
    */
   const app = require('../app');

   
    
3. Babel 配置已加入到  “  bin/start.js ” 项目入口文件，我们可以执行以下命令确认一下我们的项目是否正常启动
    

   ➜  jasonsoft-koa-server git:(main) ✗ node bin/start.js 
   [Running] 服务已启动：http://localhost:3000
   

   
   
   看到上面的结果我们的项目已顺利启动，“ app.js ” 文件中使用的ES6/ES2015的新特性都能正常运行，

   /**
    * app.js
    * 初始化相关服务和注入相关中间件
    * Added by Jason.Song (成长的小猪) on 2021/01/31
    * CSDN: https://blog.csdn.net/jasonsong2008
    * GitHub: https://github.com/JasonSoft-Net
    */
   
    /** 引入Koa框架 */
   import Koa from 'koa';
   
   /** 初始化Koa */
   const app = new Koa();
   
   app.use(async ctx => {
     ctx.body = 'Hello World';
   });
   
   /** 监听指定端口，启动服务 */
   app.listen(3000, ()=> {
     console.log(`[\x1B[36mRunning\x1B[0m] 服务已启动：http://localhost:3000`);
   });

   通过上面的配置，我们很好的解决了在项目启动报错的问题，例如我们在“ jasonsoft-koa-server”项目运行的ES支持错误

   ➜  jasonsoft-koa-server git:(main) ✗ node app.js
   (node:33323) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
   (Use `node --trace-warnings ...` to show where the warning was created)
   /Users/jason/Projects/Node/jasonsoft-koa-server/app.js:9
   import Koa from 'koa';
   ^^^^^^
    
   SyntaxError: Cannot use import statement outside a module
       at wrapSafe (internal/modules/cjs/loader.js:979:16)
       at Module._compile (internal/modules/cjs/loader.js:1027:27)
       at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
       at Module.load (internal/modules/cjs/loader.js:928:32)
       at Function.Module._load (internal/modules/cjs/loader.js:769:14)
       at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
       at internal/main/run_main_module.js:17:47

我将在下一篇介绍在项目中使用ESLint和Airbnb代码规范，这样在团队开发当中，代码风格保持一致，这个很重要

项目源码地址：https://github.com/JasonSoft-Net/jasonsoft-koa-server

上一篇 基于 Node.js + Koa 构建完整的 Web API 项目

下一篇 基于 Node.js + Koa 构建完整的 Web API （配置 ESLint 和使用 Airbnb 编码规范）

 

 如果此文对你有一点点帮助，请给一个赞哦；如果你对此文感兴趣，请关注我，后面将继续更新相关内容，查看我本人更多原创文章，请点击这里=>。