ES6中export 和 import

在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

原文地址：https://www.cnblogs.com/heimaguangzhou/p/11394780.html

时间： 2024-08-29 20:34:11

ES6中export 和 import的相关文章

ES6中export , export default , import模块系统总结

最近在学习使用Webpack3的时候发现,它已经可以在不使用babel的情况下使用ES6的模块加载功能了. 说到ES6的模块加载功能,我们先复习一下CommonJS规范吧: 一  . CommonJS规范规定,在每个模块内的module变量代表当前模块.这个变量的module.exports属性是对外开放的接口. 加载某个模块,其实是加载此模块的module.exports属性. exampleA.js var x = 5; var addX = function (value) { retur

JavaScript ES6中export及export default的区别

相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在JavaScript ES6中,export与export default均可用于导出常量.函数.文件.模块等,你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用,但在一个文件或模块中,export.import可以有多个,export default仅有一个. 具体使用: 1. //demo1.js export con

ES6中export与export default的区别

首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口import用于在一个模块中加载另一个含有export接口的模块.也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件).这几个都是ES6的语法. export与export default 1.export与export default均可用

ES6 中 export ，export default 区别

1.export与export default均可用于导出常量.函数.文件.模块等: 2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用: 3.在一个文件或模块中,export.import可以有多个,export default仅有一个: 4.通过export方式导出,在导入时要加{ },export default则不需要. export //a.js export const str = "hello es6&quo

es6 module export 和 import写法注意点

在使用es6 module时,注意以下几点: 1.当一个module文件中需要多个export时,使用import时,可以使用import {a,b,c ...} from '...'这种形式,a.b.c这些参数是module中export的, 也可以使用import * as xx from '..'这种形式,这样就是xx作为一个总是对象,export出来的参数作为这个总对象的属性存在 2.当一个module文件中使用export default形式暴露参数时,默认只能暴露一个参数,一个mod

ES6 Module export与import复合使用

export与import复合使用 基本语法 export {...} from '文件'; 等价于 import {...} from "文件": export {...} 先加载模块,然后重定义输出. 重定义输出名 重定义默认变量名 // a.jsexport const b = 1; export default () => { console.log("默认"); } export {default as f, b} from "./a.js

ES6：export和import

import  { Component,PropTypes } from 'react'; 1.大括号包含的是一个对象,里面的变量名必须与引入模块的对外接口的名称相同: 2.然后就是像import React from 'react'这种写法,在模块定义里面,将整个模块导出export default,再进行导入,这时候,就可以自己定义引入的模块名称了:

Node.js 中使用 ES6 中的 import / export 的方法大全

转自原文 Node.js 中使用 ES6 中的 import / export 的方法大全, 2018.11 如何在 Node.js 中使用 import / export 的三种方法, 2018.8 nodejs_es6_tutorials 因为一些历史原因,虽然 Node.js 已经实现了 99% 的 ES6 新特性,不过截止 2018.8.10,How To Enable ES6 Imports in Node.JS 仍然是老大难问题 下面我来介绍三种方法可以让我们在 Node.js 中使

ES6的export与Nodejs的module.exports

module.exports与exports,export与export default之间的关系和区别 首先我们要明白一个前提,CommonJS模块规范和ES6模块规范完全是两种不同的概念. CommonJS模块规范 Node应用由模块组成,采用CommonJS模块规范. 根据这个规范,每个文件就是一个模块,有自己的作用域.在一个文件里面定义的变量.函数.类,都是私有的,对其他文件不可见. CommonJS规范规定,每个模块内部,module变量代表当前模块.这个变量是一个对象,它的expor