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 相关文章推荐
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 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
php摘要生成函数(无乱码)
2012/02/04 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
Javascript的并行运算实现代码
2010/11/19 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
javascript的内存管理详解
2013/08/07 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
你应该知道的python列表去重方法
2017/01/17 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
学python需要去培训机构吗
2020/07/01 Python
django创建css文件夹的具体方法
2020/07/31 Python
python3处理word文档实例分析
2020/12/01 Python
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
工程力学专业毕业生求职信
2013/10/06 职场文书
销售工作人员的自我评价分享
2013/11/10 职场文书
大众服装店创业计划书范文
2014/01/01 职场文书
社区活动总结报告
2014/05/05 职场文书
介绍信范文
2015/01/31 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
创业计划书之物流运送
2019/09/17 职场文书