激情久久av一区av二区av三区,制服丝袜在线看片福利av,中文字幕+乱码+中文

為什么有些依賴必須 import *引入使用？

zhenglin

2025年11月5日 16:44 本文熱度 723

在日常前端開發(fā)中，我們常常通過 import 來引入第三方庫或模塊。像這樣：


import dayjs from "dayjs"
import { useState, useEffect } from 'react';

但你可能遇到過這樣一種情況：有些依賴如果直接寫成


import echarts from 'echarts';

會報錯，或者運行時報 echarts is undefined，而必須寫成：


import * as echarts from 'echarts';

這種現(xiàn)象可能會讓你感到疑惑：為什么 ECharts 必須使用 import * 的方式？難道普通的默認導(dǎo)入不行嗎？

本文將以 ECharts 為例，深入探討這一問題的根源，并順帶梳理 ES Module（ESM）與 CommonJS（CJS）模塊規(guī)范的差異，幫助你從底層理解 import * 背后的原因。

`import` 的幾種常見用法

在 ES Module 規(guī)范中，常見的幾種導(dǎo)入方式包括：

默認導(dǎo)入

代碼高亮：

import xxx from 'module';

要求模塊導(dǎo)出中必須有 export default xxx;。

具名導(dǎo)入

import { a, b } from 'module';

要求模塊內(nèi)部有 export const a、export const b 等具名導(dǎo)出。

命名空間導(dǎo)入


import * as mod from 'module';

將模塊的所有導(dǎo)出整合到一個對象 模塊 上。

通過ECharts 的導(dǎo)出方式深入import *

ECharts 的導(dǎo)出方式

熟悉完ES6的import的命名空間導(dǎo)入用法，我想echarts為什么需要通過import *答案已經(jīng)很明確了。我們來看看echarts的入口文件：

這三句話分別代表了三種不同的模塊兼容策略：

import * as echarts from ...

表示 ECharts 的所有導(dǎo)出都是 具名導(dǎo)出，并沒有 export default。

export as namespace echarts;
這是為了兼容 UMD 模塊，即在瀏覽器通過 <script> 直接引入時，可以掛載到全局變量 window.echarts 上。這樣我們在代碼里就能直接寫：

echarts.init(document.getElementById('main'));

export = echarts;

這是 CommonJS 風(fēng)格的導(dǎo)出，相當(dāng)于 module.exports = echarts，用于兼容 Node.js 或老的打包工具。

在這種情況下，TypeScript 需要你用 import * as echarts 來導(dǎo)入，而不是 import echarts from 'echarts'。

為什么 ECharts 沒有用 `export default`

看到這里，你可能還是有些困惑，如果導(dǎo)出入口改成：

代碼高亮：

import * as echarts from './types/dist/echarts';
// Export for UMD module.
export as namespace echarts;
export default echarts;

我們代碼里不是就可以使用下面的導(dǎo)入方式了嗎？

import echarts from 'echarts';

原因主要有三點：

兼容性考慮

ECharts 是一個全球用戶量非常大的可視化庫，既要兼容 ESM，又要兼容 CommonJS，還要兼容 UMD（通過 <script> 引入時掛到 window.echarts 上）。
如果用 export default，對 CJS/UMD 的支持會比較麻煩，而 export = 在 TypeScript 下能天然兼容多種模塊系統(tǒng)。

歷史包袱

ECharts 最早是基于 UMD 格式發(fā)布的（早于 ES Module 普及）。
當(dāng)時的入口寫法更偏向：

if (typeof module === 'object' && module.exports) {
  module.exports = echarts;
} else {
  window.echarts = echarts;
}

后來遷移到 TypeScript 時，延續(xù)了 export = echarts 這種兼容寫法，而不是強行改為 export default。

API 設(shè)計思路

ECharts 官方的定位是“命名空間式 API”，也就是說，用戶習(xí)慣通過 echarts.xxx() 方式調(diào)用。
為了保持這種語義一致性，團隊沒有提供 default export，而是把所有 API 都掛在一個 echarts 命名空間對象下。

**`import *` 的其他應(yīng)用場景**

除了 ECharts，還有一些庫或工具函數(shù)常常需要使用 import *：

工具類庫

有些工具庫導(dǎo)出了非常多的函數(shù)，如果不想逐個引入，可以整合為一個命名空間對象。例如：lodash-es

import * as _ from 'lodash-es';


const arr = [1, 2, 2, 3, 4];
console.log(_.uniq(arr)); // [1, 2, 3, 4]

配置性常量集合

當(dāng)一個模塊只導(dǎo)出大量的常量或枚舉值時，import * 可以避免逐個列出，寫法更整潔。

例如：Node.js 內(nèi)置 path 模塊（ESM 版本）

代碼高亮：
import * as path from 'path';

console.log(path.sep);   // 當(dāng)前系統(tǒng)路徑分隔符（Windows: '', Linux/Mac: '/'）
console.log(path.resolve('./src'));