现在绝大多数的浏览器都不支持ES6,所以使用es6时需要使用bebal把es6转化为es5,

项目目录:

demo1:单个js文件的转化

src文件下的 test1.js

const aa="this is test1";

console.log("this is from test1",aa);\

在项目根目录引入bebal文件

.babel

内容:

{

  presets:["es2015"]

}

安装babel-cli

cnpm i babel-cli -g

因为要转es6到es5所以还需要安装babel-preset-es2015

cnpm i babel-preset-es2015 --save-dev

转化test1.js

babel src --out-dir dist

(把src目录下的js文件转换成es5到dist文件下)

页面引入dist下的test1.js 运行不会报错

demo2:多个文件项目引入,并转化

src文件下:

test2.js

const bb="this is bb";

export {bb}

test3.js

import {bb} from 'test2.js'

console.log(bb);

转换 babel src --out-dir dist

页面引入dist文件下的test2.js test3.js

报错

由于我们通过node;来编译ES6成es5,node模块就是参照CommonJS的规范来的,而且现在的浏览器和node都不支持大部分的ES6

解决办法

可以通过webpack进行打包,把所有的依赖都合并为一个文件,同时使用babel进行转换,然后再引入html文件中就可以了

es6 import 报错的更多相关文章

  1. .vue文件在webstorm中es6语法报错解决方法

    1 语法支持es6设置 Preferences > Languages & Frameworks > JavaScript 把 Javascript Language versio ...

  2. webpack 打包压缩 ES6文件报错UglifyJs + Unexpected token punc ((); 或者 Unexpected token: operator (>)

    webpack 打包压缩 ES6文件报错UglifyJs + Unexpected token punc (();  或者 Unexpected token: operator (>) 解决方案 ...

  3. webstorm中.vue报错(es6语法报错)-转

    1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript把 Javascript L ...

  4. 关于使用spring版本4.1.6注解@Import报错

    记录一下遇到的错误 org.springframework.beans.factory.parsing.BeanDefinitionParsingException: 使用环境:spring 4.1. ...

  5. matplotlib.pyplot import报错: ValueError: _getfullpathname: embedded null character in path

    Environment: Windows 10, Anaconda 3.6 matplotlib 2.0 import matplotlib.pyplot 报错: ValueError: _getfu ...

  6. Eclipse + Pydev开发Python时import报错解决方法

    一.  原文链接:http://blog.csdn.net/lhanchao/article/details/51306626            用eclipse +PyDev开发python时, ...

  7. vue +ts 在router的路由中import报错的解决方案

    在router.ts中引入.vue文件,会提示打不到module,但是编译可能成功,运行也不报错 找了好久,发现了这个答案 https://segmentfault.com/a/11900000167 ...

  8. ImportError: DLL load failed: 找不到指定的模块;ImportError: numpy.core.multiarray failed to import 报错解决

    python程序运行出错,出错的两行主要信息如下: ImportError: DLL load failed: 找不到指定的模块 ImportError: numpy.core.multiarray ...

  9. Windows下通过pip安装PyTorch 0.4.0 import报错

    问题:通过pip安装PyTorch 0.4.0成功,但是import时报错. import torch  File "D:\Python\Python36\lib\site-packages ...

随机推荐

  1. 使用fuser命令kill一个终端(特殊文件)的方法

    /*********************************************************************  * Author  : Samson  * Date   ...

  2. jquery easyui 全部图标

    所有的图标在 jquery-easyui-1.2.6\themes\icons 目录下, 在icon.css定义的如何引用 jquery-easyui-1.2.6/themes/icon.css .i ...

  3. 1.excel如何让一列的数都乘以固定值

     让B列等于A列乘以39.37 1.我们先选中B列中要编辑的单元: 2.再在编辑栏中输入公式:=A2*39.37   (PS:*号即表示是×号) 3.公式输入后,按下快捷键:CTRL+回车:记住一定要 ...

  4. node开发后将本地mysql数据导入到服务器mysql

    近期写的一个钉钉企业微应用用到了mysql数据库(用koa写的后台,并用mysql库来连接),现在需要把本地数据库的数据导入到服务器的数据库中. 服务器安装mysql 可以google篇centos的 ...

  5. WinCE下使用C#的几个小技巧

    1.我们知道,在使用Windows的开发机上用C#启动一个外部程序的方法有很多,但这些方法用在使用WinCE的目标工控机上都无能为力,现在小嫚儿以打开一个IE为例,介绍如何在WinCE下使用C#来打开 ...

  6. kubernetes-notes--阅读笔记

    文档地址 https://www.huweihuang.com/kubernetes-notes/

  7. aop学习总结一------使用jdk动态代理简单实现aop功能

    aop学习总结一------使用jdk动态代理实现aop功能 动态代理:不需要为目标对象编写静态代理类,通过第三方或jdk框架动态生成代理对象的字节码 Jdk动态代理(proxy):目标对象必须实现接 ...

  8. linux环境下安装的activemq的输出日志

    activemq输出日志的位置: activemq/data/activemq.log 查看activemq.log文件即可.

  9. ZOJ - 3954 Seven-Segment Display 【状态标记】

    题目链接 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3954 题意 有一块 LED 灯 然后上面有七块灯管 在显示不同数 ...

  10. stm32 USART使用标志

    在USART的发送端有2个寄存器,一个是程序可以看到的USART_DR寄存器,另一个是程序看不到的移位寄存器,对应USART数据发送有两个标志,一个是TXE=发送数据寄存器空,另一个是TC=发送结束. ...