ES6中export 和 import

Posted 2022-08-14 heimaguangzhou

在ES6中我们可以通过export导出一个模块，有一下几种方法：
  1.1  export default xx ，默认导出一个模块

[AppleScript] 纯文本查看 复制代码

?

1 2 3

export default function(a, b)   console.log(a + b);

在另一个页面导入这个js文件：

[AppleScript] 纯文本查看 复制代码

?

1 2	// import a from "./base.mjs"; // a(1, 2);

这里我们要注意的是，此处我们引入的是export default默认的模块，所以我们这里要给引入的东西起一个名字。

1.2  注意，一个文件只能export default 一次 ，如果多次导出default就会报错
Identifier ‘*default*‘ has already been declared

显示default已经被声明的错误。

1.3  export default 还可以导出一个对象模块

[AppleScript] 纯文本查看 复制代码

?

1 2 3 4 5 6

export default   name: "jack",   tell: function()     console.log(this.name);    ;

在引入代码的地方依旧是起一个别名

[AppleScript] 纯文本查看 复制代码

?

1	import a from ‘base.mjs‘

1.4 如果要导出多个数据，可以使用export xx
比如：

[AppleScript] 纯文本查看 复制代码

?

1	export const a = function()

注意： 这种可以导出很多个
1.5  上述代码是直接在导出声明，你也可以先声明，再一起导出：

[AppleScript] 纯文本查看 复制代码

?

1 2 3 4 5 6

// 4. export 可以 导出一些其他数据 const name = "harry"; const age = 19; // 错误写法 要么直接声明在export中要么用类对象的形式表示 // export name,age export name, age ;

注意： 不过export name,age的写法是错误的 。要用一个类似对象的格式接收要导出的对象。

1.6 在导入页面：
我们可以同时引入 default暴露的数据和export的数据

[AppleScript] 纯文本查看 复制代码

?

1 2 3 4 5

// 可以和default导入的模块共存 // 使用es6的解构方式把导出的数据传递出来 // import name, age from "./base"; // 也可以简写到一起 // import a, name, age from "./base";

1.7 可以起一个别名：

[AppleScript] 纯文本查看 复制代码

?

1 2 3

// 也可以导出部分属性 用别名表示 及时和a重名也没关系 // import name as a, age from "./base"; // console.log(a);

但是不可以重名。

1.8 如果想导入全部数据：

[AppleScript] 纯文本查看 复制代码

?

1 2 3 4

// 一次性大丰收 获取全部数据 // 但是由于我们导出的模块不是当前页面全部都要用到，所以不建议使用这种全部导入的方式，选择按需导入 es6的解构方式会好很多 import * as a from "./base"; console.log(a);

 

 

最后： 在node中，es6中的module语法处于试验阶段，所以在node中运行的代码要把后缀名js 改成 mjs

 

更多技术资讯可关注：gzitcast