最近在学用nuxt集成koa2做vue后台,发现官方自带脚手架搭建的koa2使用的仍是es5语法,如果想用es6怎么办呢?

这是由于自带脚手架在构建koa2时默认的nodemon是没有使用babel编译的,所以我们首先需要在启动命令后加上 --exec babel-node


"scripts": {
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production node server/index.js --exec babel-node",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"

这还不够,因为我们没有去配置babel,所以我们需要在.babelrc去做一下presets的配置,在此之前我们需要安装一下babel插件

没有全局安装过babel-cli的同学请输入


npm i babel-cli -g

使用yarn的同学则输入


yarn global add babel-cli

保险起见你可能还需要安装babel-core


npm i babel-core -g

然后我们开始安装babel-preset,输入


npm i babel-preset-es2015 --save-dev

使用yarn的同学输入


yarn add babel-preset-es2015 -d

最后一步,我们需要在项目的根目录创建.babelrc文件,并在里面写上如下配置:


{
"presets": ["es2015"]
}

OK, 大功告成!开始愉快的用es6写koa2吧!

来源:https://segmentfault.com/a/1190000017327034

使用nuxt.js官方脚手架构建koa2的es6编译问题的更多相关文章

  1. 使用nuxt.js官方脚手架构建项目时ES6编译问题SyntaxError: Unexpected token import

    用nuxt集成koa2做vue后台,官方自带脚手架搭建的koa2仍是ES5语法,在构建koa2时默认的nodemon是没有使用babel编译的, 所以首先需要在启动命令后加上--exec babel- ...

  2. Vue.js项目脚手架构建

    vue.js文档:https://cn.vuejs.org/v2/guide/ 参考这个或者参考菜鸟教程也可以,不过还是那句话官网权威. 我这个主要是看相关的学习视频搭建的. 一.环境准备 环境准备( ...

  3. node.js应用脚手架:koa2、sequelize、mysql

    自制了一个 nodejs 应用的脚手架. 基于 koa2 的,所以需要保证 node 环境至少为 7.6.0 吸取了以前的踩坑教训,添加了守护进程,确保应用不会因为异常导致网站直接挂掉(使用了 for ...

  4. Nuxt.js项目实战

    感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给 ...

  5. Nuxt.js 基础入门教程

    原文链接 Vue 开发一个单页面应用,相信很多前端工程师都已经学会了,但是单页面应用有一个致命的缺点,就是 SEO 极不友好.除非,vue 能在服务端渲染(ssr)并直接返回已经渲染好的页面,而并非只 ...

  6. 🏃‍♀️点亮你的Vue技术栈,万字Nuxt.js实践笔记来了~

    前言 作为一位 Vuer(vue开发者),如果还不会这个框架,那么你的 Vue 技术栈还没被点亮. Nuxt.js 是什么 Nuxt.js 官方介绍: Nuxt.js 是一个基于 Vue.js 的通用 ...

  7. Nuxt.js服务端渲染实践,从开发到部署

    感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给 ...

  8. Feathers JS – 基于 Express 构建数据驱动的服务

    Feathers 是一个轻量的 Web 应用程序框架,基于 NodeJS 最流行​​的 Web 框架——Express.这使得它很容易使用 socket.io 来创建 RESTful Web 服务和实 ...

  9. next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器,并用PM2守护程序

    前端渲染:vue.react等单页面项目应该这样子部署到服务器 貌似从前几年,前后端分离逐渐就开始流行起来,把一些渲染计算的工作抛向前端以便减轻服务端的压力,但为啥现在又开始流行在服务端渲染了呢?如v ...

随机推荐

  1. Netty TCP粘包/拆包问题《二》

    1.DelimiterBasedFrameDecoder:是以分隔符作为结束标志进行解决粘包/拆包问题 代码: EchoClient:客户端 /* * Copyright 2012 The Netty ...

  2. webpack:Cannot find module 'extract-text-webpack-plugin'

    问题: 在终端中使用此命令安装了extract-text-webpack-plugin,npm install -g extract-text-webpack-plugin并在webpack.conf ...

  3. 微信小程序之组件的集合(四)

    这个主要是来开发book的这个大模块的,看看如何优雅的开发出booked模块! 一.book模块的创建 这个就很简单了,创建一个大的框架是很简单的 二.组件的编写 (1)wxml组件页面的编码 首先是 ...

  4. Python开发利器Pycharm

    可以新建项目的时候,在下面的小扳手那里创建虚拟化环境.若想安装包,直接file->setting里面找到对应项目,然后添加新的包即可.   视频地址:http://edu.51cto.com/c ...

  5. gulp入门之常见处理方式(三)

    整合 streams 来处理错误 默认情况下,在 stream 中发生一个错误的话,它会被直接抛出,除非已经有一个时间监听器监听着 error时间. 这在处理一个比较长的管道操作的时候会显得比较棘手. ...

  6. 安装springsource-tool-suite插件成功之后找不到spring的处理办法

    最近学习spring,安装springsource-tool-suite插件,成功之后,在help-installation details里面可以找到安装的spring插件,却在window-pre ...

  7. java异常处理throw和throws的区别

    throws和throw区别 throws是用来声明一个方法可能抛出的所有异常信息,throws是将异常声明但是不处理,而是将异常往上传,谁调用我就交给谁处理. 而throw则是指抛出的一个具体的异常 ...

  8. mysql导出数据库某些表的数据

    # 导出数据,一般从从库导出,减少主库的压力.mysqldump -hhostname -P3306 --single-transaction --master-data= database_name ...

  9. 字符界面总是显示 login incorrect

    一般来说出现这样的提示,是因为登陆的密码错误,如果密码中有数字,最好用主键盘输入,用数字键盘会有错误.

  10. 使用innerHTML属性向head中插入字符时报“无法设置 innerHTML 属性。 该操作的目标元件无效”的错误

    向head中动态插入script文件,代码如下: var sc = document.createElement("script"); sc.src = "//www.c ...