一、前言

前端的模組化規範包括 commonJS、AMD、CMD 和 ES6。其中 AMD 和 CMD 可以說是過渡期的產物，目前較為常見的是commonJS 和 ES6。在 TS 中這兩種模組化方案的混用，往往會出現一些意想不到的問題。

二、import * as

考慮到相容性，我們一般會將程式碼編譯為 es5 標準，於是 tsconfig.json 會有以下配置：

{
 "compilerOptions": {
  "module": "commonjs","target": "es5",}
}

程式碼編譯後最終會以 commonJS 的形式輸出。
使用 React 的時候，這種寫法 import React from "react" 會收到一個莫名其妙的報錯：

Module "react" has no default export

這時候你只能把程式碼改成這樣：import * as React from "react"。
究其原因，React 是以 commonJS 的規範匯出的，而 import React from "react" 這種寫法會去找 React 模組中的 exports.default，而 React 並沒有匯出這個屬性，於是就報瞭如上錯誤。而 import * as React 的寫法會取 module.exports 中的值，這樣使用起來就不會有任何問題。我們來看看 React 模組匯出的程式碼到底是怎樣的（精簡過）：

...
var React = {
 Children: {
  map: mapChildren,forEach: forEachChildren,count: countChildren,toArray: toArray,only: onlyChild
 },createRef: createRef,Component: Component,PureComponent: PureComponent,...
}

module.exports = React;

可以看到，React 匯出的是一個物件，自然也不會有 default 屬性。

二、esModuleInterop

為了相容這種這種情況，TS 提供了配置項 esModuleInterop 和 allowSyntheticDefaultImports，加上後就不會有報錯了：

{
 "compilerOptions": {
  "module": "commonjs","allowSyntheticDefaultImports": true,"esModuleInterop": true
 }
}

其中 allowSyntheticDefaultImports 這個欄位的作用只是在靜態型別檢查時，把 import 沒有 exports.default 的報錯忽略掉。
而 esModuleInterop 會真正的在編譯的過程中生成相容程式碼，使模組能正確的匯入。還是開始的程式碼：

import React from "react";

現在 TS 編譯後是這樣的：

var __importDefault = (this && this.__importDefault) || function (mod) {
  return (mod && mod.__esModule) ? mod : { "default": mod };
};

Object.defineProperty(exports,"__esModule",{ value: true });

var react_1 = __importDefault(require("react"));

編譯器幫我們生成了一個新的物件，將模組賦值給它的 default 屬性，執行時就不會報錯了。

三、Tree Shaking

如果把 TS 按照 ES6 規範編譯，就不需要加上 esModuleInterop，只需要 allowSyntheticDefaultImports，防止靜態型別檢查時報錯。

{
 "compilerOptions": {
  "module": "es6","target": "es6","allowSyntheticDefaultImports": true
 }
}

什麼情況下我們會考慮匯出成 ES6 規範呢？多數情況是為了使用 webpack 的 tree shaking 特性，因為它只對 ES6 的程式碼生效。

順便再發散一下，講講 babel-plugin-component。

import { Button,Select } from 'element-ui'

上面的程式碼經過編譯後，是下面這樣的：

var a = require('element-ui'); 
var Button = a.Button; 
var Select = a.Select;
var a = require('element-ui') 會引入整個元件庫，即使只用了其中的 2 個元件。
babel-plugin-component 的作用是將程式碼做如下轉換：

// 轉換前
import { Button,Select } from 'element-ui'
// 轉換後
import Button from 'element-ui/lib/button' 
import Select from 'element-ui/lib/select'

最終編譯出來是這個樣子，只會載入用到的元件：

var Button = require('element-ui/lib/button');
var Select = require('element-ui/lib/select');

四、總結

本文講解了 TypeScript 是如何匯入不同模組標準打包的程式碼的。無論你匯入的是 commonJS 還是 ES6 的程式碼，萬無一失的方式是把 esModuleInterop 和 allowSyntheticDefaultImports 都配置上。

到此這篇關於詳解Typescript 內建的模組匯入相容方式的文章就介紹到這了,更多相關Typescript 內建模組匯入相容內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！