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 相关文章推荐
JQuery 获取和设置Select选项的代码
Feb 07 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Python中使用asyncio 封装文件读写
2016/09/11 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
Python如何绘制日历图和热力图
2020/08/07 Python
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
建龙钢铁面试总结
2014/04/15 面试题
销售自荐信
2013/10/22 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python