理解 import 基本用法

471 阅读1分钟

语法

  • 不同的 import 的引入方法
import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

  • defaultExport 将引用模块默认导出的名称。

  • module-name 要导入的模块。这通常是包含模块的.js文件的相对或绝对路径名,不包括.js扩展名。某些打包工具可以允许或要求使用该扩展;检查你的运行环境。只允许单引号和双引号的字符串。

  • name 引用时将用作一种命名空间的模块对象的名称。

  • export, exportN 要导入的导出名称。

  • alias, aliasN 将引用指定的导入的名称。

描述

  • 导入整个模块内容
import * as myModule from '/modules/my-module.js';
  • 导入单个/多个导出
import {myExport} from '/modules/my-module.js';
import { foo,bar } form '/modules/my-module.js'
  • 导入带有别名的导出
import {reallyReallyLongModuleExportName as shortName}
  from '/modules/my-module.js';
  • 当然你可以直接导入
import myDefault from "my-module";