JavaScript: 模块导入导出JavaScript: 模块导入导出JavaScript: 模块导入导出JavaScript: 模块导入导出
  • 首页
  • 博客
  • 书签
  • 文件
  • 分析
  • 登录

JavaScript: 模块导入导出

发表 admin at 2022年9月6日
类别
  • JavaScript
标签

export - JavaScript | MDN (mozilla.org)

import - JavaScript | MDN (mozilla.org)

ES6 中引入了“模块”(module)。

导出模块就是让 .js 文件中的某些值对外可见,导入模块就是将那些对外可见的值导入到当前 .js 文件中。

模块导出、导入分别使用关键字 export、import。

如果在一个 .js 文件文件中使用了 export 或 import,那这个 .js 文件就会被当做一个模块。

在 HTML 中引入模块,以及,在 <script> 和 </script> 之间使用模块,都需要将 <script> 的属性 tyep 设为 module:

<script type="module" src="./im.js"></script>

<script type="module">
    // code
</script>

导出模块有两种方法:默认导出、命名导出。与之对应,导入模块也有两种方法:默认导入、命名导入。

每个模块只能有一个默认导出。

1 默认导出与导入

1.1 默认导出

默认导出使用关键字 default。

导出变量:

// 方法一
export default 'Tom';
// 方法二
const name = 'Tom';
export default name;
// 方法三
const name = 'Tom';
export {name as default}; // 大括号必不可少

导出函数:

// 方法一
export default function() {
    console.log("miaow~");
};
// 方法二
function say() {
    console.log("miaow~");
};
export default say;
// 方法三
function say() {
    console.log("miaow~");
};
export {say as default};

导出对象:

// 方法一
export default {
    name: 'Tom',
    age: 3
};
// 方法二
const info = {
    name: 'Tom',
    age: 3
}
export default info;
// 方法三
const info = {
    name: 'Tom',
    age: 3
}
export {info as default}; // 大括号是必不可少的

1.2 默认导入

默认导入变量:

// 方法一
import tom from './ex.js';
// 方法二
import {default as tom} from './ex.js';
//导入后就可以使用了
console.log(tom);

默认导入必须指定名字,但名字可以任取(如本例中的 tom)。

默认导入函数:

// 方法一
import speak from './ex.js';
// 方法二
import {default as speak} from './ex.js';
//导入后就可以使用了
speak();

默认导入对象:

// 方法一
import tom from './ex.js';
// 方法二
import {default as tom} from './ex.js';
//导入后就可以使用了
console.log(tom.name);

2 命名导出与导入

2.1 命名导出

先声明、后导出:

const name = 'Tom';
let age = 3;
function say() {
    console.log("miaow~");
};
export {name, age, say}; // 哪怕只导出一个值,也需要用花括号括起来

声明的同时导出:

export const name = 'Tom';
export let age = 3;
export function say() {
    console.log("miaow~");
};

注意:

a) 即使是 let 声明的变量,在导入后也无法重新赋值,只能用作常量。

b) 导入前可以重新赋值。

export let age = 3;
age = 1; // 最终导出的值为 1

使用别名导出:

const name = 'Tom';
export {name as newName};

注意:使用别名导出,就必须使用别名导入。

2.2 命名导入

建议将导入语句放在模块的顶部。(就算不这样做,import 语句也会被自动提升到模块顶部)

假设导出文件为同一目录下的 ex.js。

import {name, age, say} from './ex.js';  // 与解构赋值很像
console.log(name);
console.log(age);
say();

导入时可以重命名:

import {name as newName, age, say} from './ex.js'; // 与解构赋值很像,但使用的是 as,而非冒号
console.log(newName);
console.log(age);
say();

一次性全部导入:

import * as Info from './ex.js';
console.log(Info.name);
console.log(Info.age);
Info.say();

注意:一次性导入时,必须指定集合名(如本例中的 Info)

其它

1 命名导入和默认导入可以在一条 import 语句内完成:

//方法一
import {default_import as default, named_export0, named_export1} from './*js';
//方法二
import default_import, {named_export0, named_export1} from './*js';
//方法三
import default_import, * as setName from './*js';

2 在 ES6 之前,就已经出现了模块规范 CommonJS。CommonJS 使用 require、exports 来导入、导出模块。

node.js 默认就是使用 CommonJS。可以通过设置目录层次中最近的 package.json 中"type": "module" 来强制该项目下的所有文件使用 ECMAScript 模块。

{
  "type": "module"
}

也可以将文件后缀改为 .mjs,以使单个文件使用 ECMAScript 模块。

其它方法详见:Modules: Packages | nodejs.org v17.6.0(注意,请使用较新版本的 node.js)

3 导入模块并执行。

如下所示。

ex.js:

console.log(1)

in.js:

console.log(2)
import './ex.js'; // 这种导入方式并不能使用 ex.js 中的函数、对象等,但可以使用直接执行 ex.js 中的代码(称之为“副作用”)

执行结果:

1 // 这是由于 import 的自动提升
2

4 使用 import 时,最后遵循以下建议:

a) 相对路径都以 ./ 开头。如 import {a} from './ex.js'。如果不以 ./ 开头,那 nodejs 会以为是从 node_modules 中导入的。

b) 不要省略文件后缀 .js。否则,浏览器可能会把 import {a} from './ex' 中的 ./ex 误以为是网址。

c) 即使要导入的是 index.js ,也要写全路径和文件名。(webpack 可以省,但 nodejs 不能省)

5 nodejs 中使用 import

在nodejs 中使用 import 导入包,实际导入的是哪个文件呢?

package.json 有三个顶级属性:main、browser、module。

main 是 nodejs 官方支持的属性。

browser 也得到了 npm 的支持。

module 没有得到官方支持,但被广泛使用。

在 vuecli 中,实际导入的是 module 属性中定义的 js 文件。

发表回复 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

类别

  • Cat
  • Python
  • MySQL
  • Django
  • Html/CSS
  • JavaScript
  • Vue
  • RegExp
  • php
  • Practice
  • Virtualization
  • Linux
  • Windows
  • Android
  • NAS
  • Software
  • Hardware
  • Network
  • Router
  • Office
  • WordPress
  • SEO
  • English
  • Games
  • Recipes
  • living
  • Memorandum
  • Essays
  • 未分类

归档

©2015-2023 艾丽卡 Blog support@alaica.com
      ajax-loader