关于(function (exports, require, module) { import Koa from 'koa' SyntaxError: Unexpected identifier

最新推荐文章于 2022-08-29 10:11:42 发布
最新推荐文章于 2022-08-29 10:11:42 发布
阅读量1.7k 收藏
点赞数
分类专栏： 问题 文章标签： Nuxt Vue 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fj1247565817/article/details/96862720
版权

关于(function (exports, require, module, __filename, __dirname) { import Koa from ‘koa’ SyntaxError: Unexpected identifier

一、问题

关于Nuxt配置的项目，在配置server的时候，遇到一系列的bug，import导入的包出错，而配置里默认的const *** = require（’ *** '）
在这里插入图片描述
可以通过const 导入Koa，但还是想用import导入

于是发现还可以使用babel去处理

二、解决

安装 npm i babel-cli babel-preset-es2015

修改package.json，结合babel处理
在这里插入图片描述
在这里插入图片描述
再去项目根目录新建一个.babelrc文件，加上这段代码
在这里插入图片描述
重新运行项目 npm run dev 解决了

fj1247565817
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
which-module:查找需要require（）d的模块对象
05-01
哪个模块 查找需要require（）d的模块对象 在require.cache找到require()或import ed的module对象-本质上是对require()的反向查找。 对于想要例如查找其本身require...// exports: [Function], // parent: ..., // fi
nodejs详细koa框架学习笔记
小罗的博客
03-02 1850
在koa中，获取GET请求源头时koa中request对象中的query方法或querystring方法，query返回是格式化号的参数对象，querystring返回的是请求字符串，由于ctx对request的API有直接引用方式，所以获取GET请求数据有两个途径。koa中间件采用洋葱模型(对于每个中间件，在完成一些事情后，可以非常优雅的将控制权传递给下一个中间件，并能够等待它完成，当后续中间件完成处理后，控制权又回到了自己)koa提供了从上下文直接读取，写入cookie的方法。#安装ejs模板引擎。
基于 Node.js + Koa 构建完整的 Web API （让项目支持 ES6/ES2015 及更高版本的新特性）
成长的小猪 宋永登
02-01 709
主题内容：基于 Node.js + Koa 构建完整的 Web API （让项目支持 ES6/ES2015 及更高版本的新特性） 目标框架：Node.jsv14.15.4(包含npm 6.14.10) 开发工具：Visual Studio Code （VSCode） 开发平台：macOS Big Sur 11.1 / Windows 10 开发人员：成长的小猪 Jason Song 背景描述：上一篇基于 Node.js + Koa 构建完整的 Web API 项目我们介绍了引入KoaWeb...
使用webpack时报如下错误：(function (exports, require, module, __filename, __dirname) { import path from ‘path
weixin_44145962的博客
10-17 1373
使用npm run build打包压缩代码时，出现如下报错： 解决办法： 将里面的包导入导出方式全部用ConmonJS的方式书写， 即const path = require(‘path’), module.exports = {} 让人容易迷惑的地方： import "./less/index.less"; import "./css/index.css"; 明明不支持es6，但是在这里却又能够使用es6提供的导入方法 原理： webpack包会在打包文件时，自动处理，使其能够适应es6语法，所以在
从零开始实现一个koa-starter（三）
弼码温
08-29 315
本节目标 本节【GitHub地址】,本篇主要目标时熟悉typescript的装饰器，以及学习使用装饰器，并且将基于装饰器，改造koa-router路由自动装载功能。 ts装饰器 typescript装饰器官方文档 装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。 装饰器使用 @expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。 注意这里的所谓的运行时被调用，这里指的是文件装载运行的时间点，而不是被
用法：node模块都具备的方法（exports、module、require、__filename、__dirname）
weixin_30826095的博客
07-26 408
凡是玩弄nodejs的人，都明白，每一个模块都有exports、module、require、__filename、__dirname的方法 清楚了解方法的用法后，玩转node就等于清楚了日常讲话的内容 (function(exports,require,module,__filename,__dirname){ //打印一出，所有模块的类型和值一目了然 console...
koa-firebase-functions：用于Firebase功能的Koajs包装器
02-03
koa-firebase功能 用于Firebase功能的Koa包装器。 安装 npm i koa-firebase-functions --save 用法 const koaFirebase = require ( 'koa-firebase-functions' ) ; const koa = require ( 'koa' ) , app = koa . app...
seaJs使用心得之exports与module.exports的区别实例分析
10-19
主要介绍了seaJs使用心得之exports与module.exports的区别,结合实例形式分析了exports与module.exports具体功能、使用方法及相关操作注意事项,需要的朋友可以参考下
vue-koa2-login：Vue + Koa2实现前定向注册登录流程
02-03
vue-koa2登录 Vue + Koa2实现前初步注册登录流程 技术栈 前置： 重点： 环境要求 ：推荐最新的LTS版本，至少要在v7.6以上（7.6默认支持Async/Await ）。 ：我使用的是最新版本，5.x应该都可以。 ：我个人强力安利...
jaeger-node：koa + jaeger
02-03
Jaeger节点 yarn start // `/config/index.js` module . exports = { jaegerConfig : { // ... } , proxyTable : [ // ... ] }
layui 引入第三方插件 day.js
今日最可爱YeahT
09-18 2107
layui模块化的规范 测试用例： test.js layui.define(function (exports) { var obj={ method2:function(a,b){ console.log("调用方法method2,参数a,"+a+" 参数b,"+b); //alert("调用方法method2,参数a,"+a+" 参数b,"+b); } }; exports('test2',obj); }); dayjs: 1，直接在官网下载源码:..
从零开始实现一个koa-starter（二）
弼码温
08-27 190
从零开始实现一个koa-starter（二） 本节目标 本节目标是实现一个简单的路由自动装载服务端，包含完整装载日志，请求日志，自动绑定controller到路由，只需按照抽象类书写controller即可。先上【GitHub地址】 应用服务的基本封装 什么是koa？ Koa 是下一代的 Node.js 的 Web 框架。由 Express 团队设计。旨在提供一个更小型、更富有表现力、更可靠的 Web 应用和 API 的开发基础。它的特点是优雅、简洁、表达力强、自由度高。跟express相比，它是一个更
JavaScript 中的 require / exports、import / export、浅谈JavaScript、ES5、ES6
墨鱼菜鸡
07-11 4322
Node.js 的基础教学 之 exports 和 module.exports：https://zhuanlan.zhihu.com/p/82057593 浅谈 JavaScript、ES5、ES6：https://www.cnblogs.com/lovesong/p/4908871.html 1、为什么有模块概念 理想情况下，开发者只需要实现核...
Koa入门（一）—— Koa项目基础框架搭建
国家特级保护废物的博客
04-22 2323
Koa项目基础框架搭建，基本目录结构、自动加载路由、环境配置、目录别名配置、自动重启、统一异常处理、中间件配置
Node.js 中使用 ES6 中的 import / export 的方法大全
禅与计算机程序设计艺术
11-05 2万+
Node.js 中使用 ES6 中的 import / export 的方法大全 三种方法。 先上图。 源代码文件目录（https://github.com/AK-47-D/nodejs_es6_tutorials）： image.png 方法1 放弃使用 ES6, 使用 Node中的 module 模块语法 util_for_node.j...
如何在 Node.js 中使用 import / export 的三种方法
热门推荐
zwkkkk1的博客
08-10 6万+
  因为一些历史原因，虽然 Node.js 已经实现了 99% 的 ES6 新特性，不过截止 2018.8.10，How To Enable ES6 Imports in Node.JS 仍然是老大难问题   下面我来介绍两种方法可以让我们在 Node.js 中使用 import/export 。 借助 Babel 1.下载必须的包 npm install babel-register...
javascript复习之旅 13.2 模块化（下）
lazy_tomato的博客
07-31 584
每个模块的变量都是独立的（因为有包装函数），输出数据包裹在对象中，来解决命名冲突的问题。其次除了暴露的数据，内部变量私有，外部无法直接修改。代码同步执行，配合上缓存，来解决依赖之间错综复杂的关系。CommonjsCommonJS模块由JS运行时实现。CommonJS是单个值导出，本质上导出的就是exports属性。CommonJS是可以动态加载的，对每一个加载都存在缓存，可以有效的解决循环引用问题。CommonJS模块同步加载并执行模块文件。Esmodule。...
koa踩坑路之--本地localhost:8080访问本地服务器localhost:3002跨域实现的两种方式
weixin_44434938的博客
03-24 1857
koa踩坑路之–本地localhost:8080访问本地服务器localhost:3002跨域实现的两种方式 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、第一种方法 设置允许跨域二、第二种方法，使用koa-cros总结 前言 学习koa过程中，需要本地8080端口访问本地后台3002接口，但是报错跨域，再不适用koa-cros之前找到的方法，一直无法跨域，后经研究后实现，现将两种方式源码贴上，希望可以帮助到正在踩坑中的新手，新手上路，大神请绕行！ 一、第一
koa2使用import出错
zhoulib__的博客
01-11 2595
在koa2中使用es6.0的import出错时 1 .安装 npm i babel-cli babel-preset-es2015 2 .配置packagge.json文件 3 .在根目录创建.babelrc { "presets": ["es2015"] } 然后npm run dev 重新运行 ...
vue3浏览器报Uncaught SyntaxError: Unexpected token import
最新发布
12-30
根据提供的引用内容，当浏览器报错"Uncaught SyntaxError: Unexpected token import"时，可能是由于浏览器不支持ES6的模块导入语法导致的。解决这个问题的方法有两种： 1. 使用Babel进行转译：Babel是一个广泛使用的JavaScript编译器，可以将ES6的代码转换为浏览器可以理解的ES5代码。你可以在项目中配置Babel，以便将ES6的模块导入语法转换为ES5的模块导入语法。具体步骤如下： - 安装Babel相关的依赖： ```shell npm install --save-dev @babel/core @babel/preset-env ``` - 在项目根目录下创建一个`.babelrc`文件，并配置Babel的预设： ```json { "presets": ["@babel/preset-env"] } ``` - 在项目中使用Babel进行转译： ```shell npx babel src --out-dir dist ``` - 在转译后的代码中，ES6的模块导入语法会被转换为ES5的模块导入语法，从而解决"Uncaught SyntaxError: Unexpected token import"的问题。 2. 使用Webpack进行打包：Webpack是一个常用的模块打包工具，可以将多个JavaScript文件打包成一个文件，并且可以对代码进行转译和优化。你可以在Webpack的配置中使用Babel进行转译，以解决浏览器不支持ES6的模块导入语法的问题。具体步骤如下： - 安装Webpack和Babel相关的依赖： ```shell npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env ``` - 在项目根目录下创建一个`webpack.config.js`文件，并配置Webpack和Babel的相关配置： ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], }, }, }, ], }, }; ``` - 在项目中使用Webpack进行打包： ```shell npx webpack ``` - 打包后的代码会被转译为ES5的模块导入语法，从而解决"Uncaught SyntaxError: Unexpected token import"的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值