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}]) => {});

推荐

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