溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了Typescript內置的模塊導入兼容方式的詳細解析，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
一、前言
前端的模塊化規范包括 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",
"target": "es5",
"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內置的模塊導入兼容方式的詳細解析有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
