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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
用javascript实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
javascript 拖放效果实现代码
Jan 22 Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
简单学习vue指令directive
Nov 03 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
Vue路由权限控制解析
Nov 09 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中的use关键字概述
2014/07/23 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
Python urlopen 使用小示例
2008/09/06 Python
python实现斐波那契递归函数的方法
2014/09/08 Python
使用Python对Access读写操作
2017/03/30 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
python实现一组典型数据格式转换
2018/12/15 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
利用python实现AR教程
2019/11/20 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
ECHT官方网站:男女健身服
2020/02/14 全球购物
2014年社区国庆节活动方案
2014/09/16 职场文书
刑事法律意见书
2015/06/04 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
python保存图片的四个常用方法
2022/02/28 Python