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

tinylcy 发布于2019-08-20 16:33 / 753人阅读

摘要：解决方法经过查阅资料，发现可以通过打包工具来将依赖合并成一个文件，然后引入中。感谢阅读，希望能帮助到大家，谢谢大家对本站的支持

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

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

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

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

src，es6开发目录

dist，es5生产目录

test，一个测试目录

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

file1

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中。

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

GPU云服务器云服务器写的文件import js import解决方案文件详解配置文件详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83006.html

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

摘要：解决方法经过查阅资料，发现可以通过打包工具来将依赖合并成一个文件，然后引入中。感谢阅读，希望能帮助到大家，谢谢大家对本站的支持这段时间，学习了一点关于es6新规范的知识，然后心血来潮，想尝试一下用ES6编写的代码在浏览器中跑起来。说干就干，先说下我的实现步骤（没想到有坑！） 1.把ES6代码转译成ES5;2.html文件引入转译后的ES5;3.然后在浏览器环境中运行;4.在node...

Markxu 2019-08-01 16:50 评论0 收藏0
ES6之路之模块详解

摘要：例如我们导入模块，可以这么导入桃翁欢迎关注公众号前端桃园报错不能定义相同名字变量报错，不能重新赋值小猪可以看到导入绑定这里不理解绑定，文章后面会解释时，形式类似于对象解构，但实际上并无关联。欢迎访问个人站点简介何为模块一个模块只不过是一个写在文件中的 JavaScript 代码块。模块中的函数或变量不可用，除非模块文件导出它们。简单地说，这些模块可以帮助你在你的模块中编写...

huashiou 2019-08-22 17:13 评论0 收藏0
【JS基础】一文看懂前端模块化规范

摘要：参考资料前端模块化详解完整版入门近一万字的语法知识点补充彻底搞清楚中的和和详解前言前端的模块化之路经历了漫长的过程，想详细了解的小伙伴可以看浪里行舟大神写的前端模块化详解(完整版)，这里根据几位大佬们写的文章，将模块化规范部分做了汇总和整理，希望读完的小伙伴能有些收获，也希望觉得有用的小伙伴可以点个赞，笔芯。什么是模块将一个复杂的程序依据一定的规则(规范)封装成几个块(文件)...

HelKyle 2019-08-23 17:09 评论0 收藏0
前端基础进阶（十五）：详解 ES6 Modules

摘要：下载地址安装一个好用的命令行工具在环境下，系统默认的非常难用，所以我个人比较推荐大家使用或者。下载地址安装在命令行工具中使用查看版本的方式确保与都安装好之后，我们就可以安装了。前端基础进阶系列目录 showImg(https://segmentfault.com/img/remote/1460000009654403?w=1240&h=272); 对于新人朋友来说，想要自己去搞定一个E...

Lowky 2019-08-21 18:31 评论0 收藏0