ES6 import Export
这周二遇到了这个module导入问题,过程真的是一言难尽,我把我遇到的问题和解决方式复现一下。
ES6导入导出关键词export和import。比如我有一个类,文件名叫cat.js(实际上类习惯大写开头,这个问题忽略)。内容如下
class cat {
constructor(name) {
this.name = name;
}
print(){
console.log(this.name);
}
}
export{cat};
最后一句话的export{cat},就是导出cat类,供其它模块调用。
比如我有一个文件m.js,调用了这个cat,内容如下
import{cat} from './cat.js';
var oneCat=new cat('德玛');
oneCat.print();
最后一个名为m.html文件引用这两个文件,内容如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="cat.js"></script>
<script type="text/javascript" src="m.js''></script>
</body>
</html>
三个文件位置如下图
当然报错了,我各方百度,CSDN某位大哥说需要将type="text/javascript" 改为type="module"
于是我改成了下面这个样子
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="module" src="cat.js"></script>
<script type="text/javascript" src="m.js''></script>
</body>
</html>
我理解的是cat才是模块,m是调用这个模块的地方,m是代码段。
仍然报错,又各方百度,有一个大哥说需要这样改./cat.js ./m.js
这个在src中可以不加,在import from ""引号里面需要加
卡了几天。又发现有一位大哥说需要把.js后缀名称去掉。
实际上我知道有没有后缀都可以,这根本不是解决办法。
我猜测是html这里写错了,又不知道正确的写法,各方百度知道有这个东西:node.js不需要浏览器,当然也不需要html文件了。
环境搭建好了,来运行这个node,报错了,搜索一番,node不支持ES6的export import语法(但支持ES5语法)。
百度搜索不到,必应搜索不到,CSDN都是不知所云。
我从这周二开始卡这问题,卡了 三天,算了,关闭所有浏览器。直接看书的附带的源码。
居然让我找到了正确的写法:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="module" src="m.js"></script>
</body>
</html>
那么这么记忆,写了import语句的js文件,将作为module放在script标签中,而export语句的js文件,则不需要加在htmlscript标签中。
写完了,还是报错。
谷歌浏览器:
Access to script at 'file:///E:/learn/code/k/m/m.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
m.js:1 Failed to load resource: net::ERR_FAILED
火狐浏览器:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///E:/learn/code/k/m/m.js. (Reason: CORS request not http).
Module source URI is not allowed in this document: “file:///E:/learn/code/k/m/m.js”.
关键EDGE浏览器不报错,我一直都是用火狐调试了,至于前面两个浏览器报错,也不想找原因了
如下
假如你的module文件名称写反了,火狐中出现的会是这个错误
SyntaxError: import declarations may only appear at top level of a module
当然你用百度搜索引擎搜索这个错误,那当然还是找不到滴。
这里还是想说一句,最还是自己去看源码,CSDN是最后的手段。
最后总结一下export import 用法给大家,前面是export,回车隔开的是import内容,记得放在Edge里运行,我在最新版 火狐和谷歌浏览器都报错
export 有两种写法,命名导出和默认导出
命名导出
常量:
const catName="大德玛"
export{catName};
import{catName} from './cat.js';
console.log(catName);
对象:
var oneCat = {
name: "最大的德玛",
print: function() {
console.log("输出的是:"+this.name);
}
}
export {
oneCat
};
import {oneCat} from './cat.js';
console.log(oneCat.name);
oneCat.print();
函数:
function print(){
console.log('输出');
}
export{print};
import {print} from './cat.js';
print();
类:
看最前面的cat例子
默认导出
函数:
export default function print() {
console.log('默认导出');
};
import print from './cat.js';
print();
类:
export default class Printing {
print(){
console.log("默认导出类");
}
};
import Printing from './cat.js';
var onePrinting=new Printing();
onePrinting.print();
命名导出可以导出多个
export{a,b,c};
参考资料:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import