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}]) => {});
複製代碼

推薦

歡迎關注前端公衆號：月亮在陽光裏

月亮在陽光裏，此微信公衆號不單單帶給你前端知識。