es6的常见import写法汇总

import是前端开发中经常使用的方法，它的用法比较灵活，现将其用法总结了几种。import后面的from指定模块文件的位置，能够是相对路径，也能够是绝对路径，.js后缀能够省略。

1. 导入默认模块或组件：import View from 'rax-view';
   这里是导入'rax-view' 中导出的默认方法或者组件，并将其命名为View。
   对应的导出为：export default View;
   导入的时候通常会使用同一个名称，也能够和导出的方法或者组件的名称不一致。

2. 导入非默认模块或组件：import { isWeex } from 'universal-env';
   导入'universal-env'中的非默认组件isWeex，也便是在'universal-env'模块中加载 isWeex ，其余方法不加载。这种加载称为“编译时加载”或者静态加载，即ES6能够在编译时就完成模块加载，效率要比CommonJS模块的加载方式高。
   对应的导出为：export const isWeex: boolean;
   这个写法是es6的对象的扩展，这里isWeex要与'universal-env'中导出的名称一致。

3. 导入时重命名：import { export1 as alias1 } from "module-name";

4. 导入多个非默认模块或组件： import { getUserInfo, bindAccount, eventName } from '@ali/dbl-mod-user';
   与导入单个模块同样，多个使用逗号分隔开

5. 导入时重命名多个组件：import { reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short } from '/modules/my-module.js';

6. 导入所有非默认模块或组件：import * as React from "react";
   将"react"里的全部非默认组件，所有导出到React组件，这里React命名能够自定义为其余，但通常使用其原有名称，方便理解。而后能够经过对象的“.”语法，来使用组件里面的全部export的方法、模块或者组件。

7. 单纯引入整个文件：import "./some.js";

8. 动态导入：import("./some.js");
   这将会返回一个promise，咱们能够并行地动态加载多个脚本：

Promise.all([
        import('./a.js'),
        import('./b.js'),
        import('./c.js'),
    ])
    .then(([a, {default: b}, {c}]) => {});
复制代码

推荐

欢迎关注前端公众号：月亮在阳光里

月亮在阳光里，此微信公众号不单单带给你前端知识。