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>
导出模块有两种方法:默认导出、命名导出。与之对应,导入模块也有两种方法:默认导入、命名导入。
每个模块只能有一个默认导出。
默认导出使用关键字 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}; // 大括号是必不可少的
默认导入变量:
// 方法一
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);
先声明、后导出:
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};
注意:使用别名导出,就必须使用别名导入。
建议将导入语句放在模块的顶部。(就算不这样做,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 文件。