解决问题SyntaxError: Unexpected token import

ES6语法的模块导入导出(import/export)功能,我们在使用它的时候,可能会报错:

SyntaxError: Unexpected token import
语法错误:此处不应该出现import

SyntaxError: Unexpected token import

我遇到的情况是import语法不识别导致的。在这里,有两种方法可以解决。

1: 使用node的v8及之后的版本

因为,node需要v8.x之后的版本才支持ECMAScript Modules 和 imort 语法
目前,node稳定版本是v8.11.2
可以使用nvm来安装管理查看多个node版本。

可以使用--experimental-modules实验模块标志来启用加载ECMAScript Modules的特性。
而且作为ES模块加载的文件名,必须以.mjs后缀结尾

node --experimental-modules my-app.mjs

此种方法,在输出的时候会提示:

(node:16208) ExperimentalWarning: The ESM module loader is experimental.

表示是个实验模块,到时候可能会修改。
例子:https://github.com/weiqinl/demo/tree/master/01-es6-import

2: 使用babel,通用方法

浏览器支持import

浏览器直接支持import程度比较低,所以需要babel来将import转换为es5语法。

安装

通过 npm:

npm install --save-dev babel-preset-env babel-cli

或者通过 yarn:

yarn add babel-preset-env --dev

使用

没有选项的默认行为将运行所有transform(与 babel-preset-latest 相同)。
新建一个.babelrc文件,并在里面写入:

{"presets": ["env"]
}

执行

babel-node index.js

我的例子: https://github.com/weiqinl/demo/tree/master/01-es6-import
babel官方给出的一个例子:https://github.com/babel/example-node-server

2018-10-18 更新

无法识别import,换一种想法,也可以说是低版本浏览器不支持。现在babel已经更新到版本7了,我们用最新的babel来实现。
该问题的babel7的解决方案:https://www.cnblogs.com/weiqinl/p/9773048.html

参考: https://github.com/nodejs/help/issues/53

转载于:https://www.cnblogs.com/weiqinl/p/9152219.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368499.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Gradle的简单Spring MVC Web应用程序

除了我们现在将使用Spring MVC而不是原始servlet之外,该文章将与我们以前的文章Simple Gradle Web Application相似。 使用Gradle运行基本的Spring MVC应用程序确实很容易。 您可以在Github上下载本教程的源代码。 先决条件 安装Gradle 我们的基本项目结构将是&am…

tps波动很大的原因_花生价格小幅上涨,要突破6元大关?粮贩:还有很大距离...

花生是一种重要的油料作物,虽然并不是全国都种植,但在黄淮、长江流域,西北和东北等地区,均广泛种植,近期花生价格一直是农民朋友的关注点,从今年花生价格来看,自从花生上市后,价格起…

html css 基础(标签选择,分页,行和块元素)

&#xff08;1&#xff09;html标签选择 1、<a></a> 的功能有连接&#xff0c;下载&#xff0c;锚点 2、<span></span> 用来区分字体样式&#xff0c;<strong></strong>和<em></em>用来强调某段文字 3、如果是描述性的某段…

使用LDAP保护Java EE6中的Web应用程序

在上一篇文章中&#xff0c;我们解释了如何在通过传输层安全性&#xff08;TLS&#xff09;/安全套接字层&#xff08;SSL&#xff09;传输数据时保护数据。 现在&#xff0c;让我们尝试了解如何为使用LDAP服务器进行身份验证的基于JEE 6的Web应用程序应用安全机制。 目的&…

设计模式(二十二)------23种设计模式(14):解释器模式

使用频率&#xff1a;★☆☆☆☆ 一、什么是解释器模式 定义一些语法规则&#xff0c;然后定义一个解析器去解析该语法&#xff1b; 所谓解释器模式就是定义语言的文法&#xff0c;并且建立一个解释器来解释该语言中的句子。 在这里我们将语言理解成使用规定格式和语法的代码。…

【HTML】前端性能优化之CDN和WPO的比较

CDN通过将资源存储在更接近用户的位置&#xff0c;缩短到服务器的往返行程&#xff0c;加快页面加载时间来解决性能问题。WPO解决方案&#xff0c;如Radware的FastView&#xff0c;则在前端进行性能提升处理&#xff0c;使页面更有效地呈现在浏览器中。 “我已经使用了内容交付…

python自动化测试-D1-学习笔记之二

Jmeter 一、Jmeter连接数据库 1、打开Jmeter&#xff0c;在Jmeter—测试计划中添加mysql的jar包&#xff0c;见如下截图&#xff1a; 2、添加好jar包后&#xff0c;添加jdbc&#xff0c;并进行设置&#xff0c;如下图 3、添加JDBC Request&#xff0c;然后在JDBC Request中操作…

Android View 的滑动

一、View 的简介 View是所有可视化控件的基类&#xff0c;我们平时接触的所有的控件&#xff0c;比如说TextView,Button 等等都继承于View。View是Android 在视觉上的呈现&#xff0c;是界面层控件的一种抽象&#xff0c;可以是单个控件也可以是一组控件。 二、坐标系 1、Andro…

flask 检测post是否为空_使用Flask搭建一个校园论坛-4

在上一节中完成了注册功能的前期准备工作&#xff0c;在这一节内容中将完成用户注册、登录功能。1.知识预览在本届中将学习到以下内容的知识如何使用wtform来渲染表单如果使用flask-mail来发送邮件2.用户注册在前端中form表单是用的比较多的东西&#xff0c;我们可以使用wtform…

SQL Table 自动生成Net底层-生成数据操作Repository

生成接口类 public static string DataTableToBaseIService(string tableName, string nameSpace, string className){var table SqlTableHelper.GetSQLTableInfo(tableName);StringBuilder reval new StringBuilder();reval.AppendFormat(" using System; using…

自定义Spring命名空间使JAXB更容易

首先&#xff0c;让我大声说出来&#xff1a; Spring不再是XML繁重的了 。 事实上&#xff0c;如今&#xff0c;您可以使用大量注释&#xff0c; Java配置和Spring Boot来编写几乎没有XML或根本没有XML的Spring应用程序。 认真地停止谈论Spring和XML&#xff0c;这已经成为过去…

利用锚点再点事吧丨

上图 接着HTML代码&#xff1a; <div id"color"> <div id"red">红</div> <div id"yellow">黄</div> <div id"black">黑</div> <div id"green">绿</div> </div>…

javaweb笔记1

转载于:https://www.cnblogs.com/webdev8888/p/9164291.html

以太网数据帧的报尾封装字段是什么_16、90秒快速“读懂”数据包的封装、解封装...

数据转发过程概述数据包在相同网段内或不同网段之间转发所依据的原理基本一致。一、数据帧封装TCP封装(四层)当主机建立了到达目的地的TCP连接后&#xff0c;便开始对应用层数据进行封装。主机A会对待发送的应用数据首先执行加密和压缩等相关操作&#xff0c;之后进行传输层封装…

CSS基本知识(慕课网)

1、注释 注解&#xff1a;CSS中注释/*这里是注释的文字*/ HTML中注释<!--这里是注释的文字--> 2、外部式css样式&#xff0c;写在单独的一个文件中 注解&#xff1a; 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中&#xff0c;这个css样式文件以“…

JMS和Spring:有时很重要的小事情

JmsTemplate和DefaultMessageListenerContainer是用于访问JMS兼容MOM的Spring帮助器。 他们的主要目标是在JMS API之上形成一层&#xff0c;并处理诸如事务管理/消息确认之类的基础结构&#xff0c;并隐藏JMS API的某些重复和笨拙的部分&#xff08;保留在那里&#xff1a; JMS…

css实现3D立方体旋转特效

先来看运行后出来的效果 它是在不停运行的一个立方体 先来看html部分的代码 <div class"rect-wrap"> <!--舞台元素&#xff0c;设置perspective&#xff0c;让其子元素获得透视效果。--><div class"container"> <!-- 容器&#…

Eclipse中的Tomcat:6个流行的“如何”问题

学习新技术总是一个艰难的过程。 当您尝试学习将要相互交互的两种技术时&#xff0c;此过程将变得更加困难。 Tomcat和Eclipse是Java EE开发中最流行的先决条件。 因此&#xff0c;要成为一名专业的开发人员&#xff0c;您需要知道如何使用此对执行最需要的操作以及如何进行一些…

adc分辨率和精度的区别_科普 | 传感器的灵敏度、分辨率和精度三者之间有何区别?...

传感器作为一种检测装置&#xff0c;具有微型化、数字化、智能化、多功能化、系统化、网络化的特点。在现代工业生产尤其是自动化生产过程中&#xff0c;需要各种传感器来监视和控制生产过程中的各个参数&#xff0c;使设备工作在正常状态或最佳状态&#xff0c;并使产品达到最…

Linux上的HotSpot GC线程CPU占用空间

以下问题将测试您对Linux操作系统上运行的Java应用程序的垃圾回收和高CPU故障排除的知识。 当调查过多的GC和/或CPU利用率时&#xff0c;此故障排除技术尤其重要。 它将假定您没有访问高级监视工具的能力&#xff0c;例如Compuware dynaTrace甚至JVisualVM。 将来会介绍使用此类…