不识别import指令

2020-05-30  本文已影响0人  KATENGC

使用npx create-nuxt-app创建Nuxt.js项目,项目默认使用require引入依赖
我们打开server文件夹下的index.js,会发现文件中使用的是require

image.png

如果我们改成improt Koa from 'koa',会提示Unexpected token import,也就是说无法识别import指令

我们执行npm run dev实际执行的是package.jsonscripts中的命令

image.png

我们可以看到这边是用nodeserver/index.jsnodemon本身是不支持用import的,之前项目中是用了babel做了处理,所以可以识别import指令,这个就是问题的关键所在。那么如何来处理呢?

解决方式:
前提:已安装babel-cli,还没安装可通过npm install -g babel-cli安装

  1. 修改package.json,结合babel处理
    我们需要用nodemonbabel一起来执行这个命令,在后面添加--exec babel-node
    image.png
  2. 在项目根目录创建一个babel的配置文件
cd mt-app
touch .babelrc
  1. 打开babelrc文件,添加如下内容:
{
  "presets": ["es2015"]
}
image.png
  1. 安装babel-preset-es2015
    输入命令npm install babel-preset-es2015npm install -g babel-cli,等待安装完成
  2. 重新运行项目
npm run dev
上一篇下一篇

猜你喜欢

热点阅读