Koa项目使用ES6语法

2020-03-29 本文已影响0人时不我与_

上篇文章我们说到了使用Mongoose进行增删改查的操作，我们都知道ES6新增了很多的新特性，那么我们如果在Koa项目中使用ES6语法会如何呢？

ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，其中提供了很多的新语法新特性，但是很多情况下他是没有办法直接进行使用的，需要使用Babel来进行转换，那么我们的Koa项目是否能够正常使用？

首先我们在Koa项目中简单的进行测试一下。

//首先我们安装koa模块
npm install koa
//然后在App.js里面进行引入，通常我们使用都是
const Koa = require('koa')

上面的这种写法是我们ES5中所使用的，那么我们ES6使用的则是import的方法进行引入，我们接下来试试看。

import Koa from 'koa'

在引入完成后，我们运行项目测试一下看看

import Koa from 'koa'
       ^^^

SyntaxError: Unexpected identifier
    at Module._compile (internal/modules/cjs/loader.js:872:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
    at Module.load (internal/modules/cjs/loader.js:790:32)
    at Function.Module._load (internal/modules/cjs/loader.js:703:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:999:10)
    at internal/main/run_main_module.js:17:11
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! koa-test@1.0.0 start: `node app.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the koa-test@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

很明显，我们的项目报错了。那么原因就是因为它无法识别我们import的语法，所以我们就需要使用到Babel转换器来将ES6语法转化为ES5语法。

npm install @babel/core @babel/preset-env @babel/register @babel/cli @babel/node

安装完成后，我们写一个入口文件index.js然后将内容与Babel引入在index.js中去。

require('@babel/register');
require('./src/app');

接下来我们还需要一步则是需要在根目录下创建.babelrc文件在文件内进行babel的配置

{
  "presets": ["@babel/preset-env"]
}

官网描述说，babel就是下一代JavaScript 语法的编译器。那么.babelrc文件就是Babel的配置文件。在进行配置完成后，我们就可以尝试运行了

//当然 我简单的在我的文件中console一下
console.log('GoodGoodGoGoGo')

console

如我们所看，命令行不再报错，并且正常进行了运行。那么我们除了这个以外还是需要进行打包拿到转换后的代码的。那么我们就在package.json中进行配置启动项。

"build": "babel src --watch --out-dir dist"

然后我们执行npm run build尝试

命令行
可以看到我们的命令行提示成功进行了转换。并且在目录中多出dist文件夹

项目自动生成dist
我们的Babel已经自动帮我们完成了转换，这样我们就可以舒服的在Koa项目中使用ES6的语法啦。

dist/app

完工~

Koa项目使用ES6语法

猜你喜欢

热点阅读