ES6 import Export

最新推荐文章于 2022-12-08 11:20:53 发布

香辣素毛肚

最新推荐文章于 2022-12-08 11:20:53 发布

阅读量523

点赞数

分类专栏： HTML 文章标签： ES6 export import

本文链接：https://blog.csdn.net/qq_34153210/article/details/104016838

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这周二遇到了这个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>

三个文件位置如下图

当然报错了，我各方百度，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>

我理解的是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};

函数：

function print() {
console.log('默认导出');
};

export{print};

import {print} from './cat.js';
print();

类：

class Printing {
print(){
console.log("默认导出类");
}
};

export {
Printing
};
import {Printing} from './cat.js';
var onePrinting=new Printing();
onePrinting.print();

参考资料：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import

香辣素毛肚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 import Export

这周二遇到了这个module导入问题，过程真的是一言难尽，我把我遇到的问题和解决方式复现一下。ES6导入导出关键词export和import。比如我有一个类，文件名叫cat.js(实际上类习惯大写开头，这个问题忽略)。内容如下class cat { constructor(name) { this.name = name; } print(){ ...
复制链接

扫一扫