美文网首页
Koa项目使用ES6语法

Koa项目使用ES6语法

作者: 时不我与_ | 来源:发表于2020-03-29 17:28 被阅读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语法

          本文链接:https://www.haomeiwen.com/subject/klsuuhtx.html