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

更新时间：2016年12月13日 09:17:03 投稿：lqh

这篇文章主要介绍了如何让es6 写的文件import 起来详解的相关资料,需要的朋友可以参考下

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

说干就干，先说下我的实现步骤（没想到有坑！）

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

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

src，es6开发目录

dist，es5生产目录

test，一个测试目录

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

file file2 app

test

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

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

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

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

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

解决方法

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

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

您可能感兴趣的文章:

es6
import

JavaScript函数中上下文有哪些规则
上下文是从英文context翻译过来，指的是一种环境。在软件工程中，上下文是一种属性的有序序列，它们为驻留在环境内的对象定义环境。在对象的激活过程中创建上下文，对象被配置为要求某些自动服务。又比如计算机技术中，相对于进程而言，上下文就是进程执行时的环境
2021-10-10
JavaScript的代码编写格式规范指南
这篇文章主要介绍了JavaScript的代码编写格式规范指南,文中所分享的一些细节基本上也是各大js代码格式化插件所默认约定俗成的,需要的朋友可以参考下
2015-12-12
JavaScript中关于indexOf的使用方法与问题小结
indexOf方法的作用是：根据给定参数x返回目标字符串(可以看成字符的数组)或数组中与x相等的项的索引。
2010-08-08
JavaScript中switch判断容易犯错的一个细节
这篇文章主要介绍了JavaScript中switch判断容易犯错的一个细节,简单说就是字符串和数字的差别,看完本文会有一个清晰的认知,需要的朋友可以参考下
2014-08-08
JavaScript中Cookies的相关使用教程
这篇文章主要介绍了JavaScript中Cookies的相关使用教程,包括Cookies的存储和删除等操作方法,需要的朋友可以参考下
2015-06-06
理解JavaScript的变量的入门教程
这篇文章主要介绍了理解JavaScript的变量的入门教程,是JS入门学习中的基础知识,需要的朋友可以参考下
2015-07-07
JS中数据结构之栈
栈是一种遵从后进先出（LIFO）原则的有序集合。新添加的或待删除的元素都保存在栈末尾，称作栈顶，另一端称作栈底。在栈里，新元素都靠近栈顶，旧元素就接近栈底。
2019-01-01
JSON的语法与规则详解
这篇文章主要介绍了JSON的语法与规则详解,Web API可以接收JSON格式的数据，也可以返回JSON格式的数据。在接收JSON 数据时，需要使用相应的库或框架来解析JSON数据，在返回JSON数据时，可以使用相应的库或框架将数据转换为JSON格式
2023-07-07
JavaScript中的getTimezoneOffset()方法使用详解
这篇文章主要介绍了JavaScript中的getTimezoneOffset()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下
2015-06-06
简介JavaScript中POSITIVE_INFINITY值的使用
这篇文章主要介绍了简介JavaScript中POSITIVE_INFINITY值的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
2015-06-06