import是前端开发中常用的方法,它的用法比较灵活,现将其用法总结了几种。import后面的from指定模块文件的位置,可以是相对路径,也可以是绝对路径,.js后缀可以省略。
-
导入默认模块或组件:
import View from 'rax-view';
这里是导入'rax-view' 中导出的默认方法或者组件,并将其命名为View。
对应的导出为:export default View;
导入的时候一般会使用同一个名称,也可以和导出的方法或者组件的名称不一致。 -
导入非默认模块或组件:
import { isWeex } from 'universal-env';
导入'universal-env'中的非默认组件isWeex,也即是在'universal-env'模块中加载 isWeex ,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即ES6可以在编译时就完成模块加载,效率要比CommonJS模块的加载方式高。
对应的导出为:export const isWeex: boolean;
这个写法是es6的对象的扩展,这里isWeex要与'universal-env'中导出的名称一致。 -
导入时重命名:import { export1 as alias1 } from "module-name";
-
导入多个非默认模块或组件:
import { getUserInfo, bindAccount, eventName } from '@ali/dbl-mod-user';
与导入单个模块一样,多个使用逗号分隔开 -
导入时重命名多个组件:
import { reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short } from '/modules/my-module.js';
-
导入全部非默认模块或组件:
import * as React from "react";
将"react"里的所有非默认组件,全部导出到React组件,这里React命名可以自定义为其他,但一般使用其原有名称,方便理解。然后可以通过对象的“.”语法,来使用组件里面的所有export的方法、模块或者组件。 -
单纯引入整个文件:
import "./some.js";
-
动态导入:
import("./some.js");
这将会返回一个promise,我们可以并行地动态加载多个脚本:
Promise.all([
import('./a.js'),
import('./b.js'),
import('./c.js'),
])
.then(([a, {default: b}, {c}]) => {});
推荐
欢迎关注前端公众号:月亮在阳光里
月亮在阳光里,此微信公众号不仅仅带给你前端知识。