Es6 写的文件import 起来解决方案详解


Posted in Javascript onDecember 13, 2016

这段时间,学习了一点关于es6新规范的知识,然后心血来潮,想尝试一下用ES6编写的代码在浏览器中跑起来。

说干就干,先说下我的实现步骤(没想到有坑!)

  1. 把ES6代码转译成ES5;
  2. html文件引入转译后的ES5;
  3. 然后在浏览器环境中运行;
  4. 在node环境中运行;

然后下面是我的一些目录结构,大致预览一下。

src,es6开发目录

Es6 写的文件import 起来解决方案详解

dist,es5生产目录

Es6 写的文件import 起来解决方案详解

test,一个测试目录

Es6 写的文件import 起来解决方案详解

 然后,看一下我的ES6开发的一些js是什么样子。

file  Es6 写的文件import 起来解决方案详解      file2  Es6 写的文件import 起来解决方案详解    app  Es6 写的文件import 起来解决方案详解

test  Es6 写的文件import 起来解决方案详解

然后我们在html中引入dist中的经过转译的文件

Es6 写的文件import 起来解决方案详解

在浏览器中测试,test中因为没引入模块,所以正常执行,app中因为引入了模块,而且是CommonJS规范,但是浏览器不支持这种规范,因此报错

Es6 写的文件import 起来解决方案详解

假如,我们为了测验,就给html加上requireJS文件,浏览器支持AMD/CMD规范。异步加载定义。

但是,我们发现,还是会报错,说明语法不支持,或者两者冲突了,因为一种是AMD,一种是CommonJS。

Es6 写的文件import 起来解决方案详解 

由于我们通过node来编译ES6成ES5,node模块就是参照CommonJS规范来的,所以ES5的语法,也属于CommonJS规范,而且现在的浏览器和node都不支持ES6的规范或大部分不支持。

解决方法

   经过查阅资料,发现可以通过webpack打包工具来将依赖合并成一个文件,然后引入html中。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
vue实现简单的日历效果
Sep 24 Javascript
JavaScript实现轮播图特效
Apr 10 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
JS实现图片垂直居中显示小结
Dec 13 #Javascript
Javascript this 函数深入详解
Dec 13 #Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 #Javascript
简单实现js浮动框
Dec 13 #Javascript
javascript中this关键字详解
Dec 12 #Javascript
深入理解javascript函数参数与闭包
Dec 12 #Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 #Javascript
You might like
基于jquery的无刷新分页技术
2011/06/11 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
很实用的js选项卡切换效果
2016/08/12 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
js实现批量删除功能
2020/08/27 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
Python生成随机数的方法
2014/01/14 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
django将数组传递给前台模板的方法
2019/08/06 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
加工操作管理制度
2014/01/19 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
2014年元旦感言
2014/03/06 职场文书
南极大冒险观后感
2015/06/05 职场文书
我的长征观后感
2015/06/09 职场文书
运动会宣传稿100字
2015/07/23 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python
python 安全地删除列表元素的方法
2022/03/16 Python
MySQL插入数据与查询数据
2022/03/25 MySQL
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
Redis特殊数据类型bitmap位图
2022/06/01 Redis