這篇文章主要講解了Typescript內(nèi)置的模塊導(dǎo)入兼容方式的詳細(xì)解析，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

我們提供的服務(wù)有：成都網(wǎng)站制作、網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、城口ssl等。為超過千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的城口網(wǎng)站制作公司

一、前言

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

二、import * as

考慮到兼容性，我們一般會將代碼編譯為 es5 標(biāo)準(zhǔn)，于是 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 的規(guī)范導(dǎo)出的，而 import React from "react" 這種寫法會去找 React 模塊中的 exports.default，而 React 并沒有導(dǎo)出這個屬性，于是就報了如上錯誤。而 import * as React 的寫法會取 module.exports 中的值，這樣使用起來就不會有任何問題。我們來看看 React 模塊導(dǎo)出的代碼到底是怎樣的（精簡過）：

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

 createRef: createRef,
 Component: Component,
 PureComponent: PureComponent,
 ...
}

module.exports = React;

可以看到，React 導(dǎo)出的是一個對象，自然也不會有 default 屬性。

二、esModuleInterop

為了兼容這種這種情況，TS 提供了配置項(xiàng) esModuleInterop 和 allowSyntheticDefaultImports，加上后就不會有報錯了：

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

其中 allowSyntheticDefaultImports 這個字段的作用只是在靜態(tài)類型檢查時，把 import 沒有 exports.default 的報錯忽略掉。
而 esModuleInterop 會真正的在編譯的過程中生成兼容代碼，使模塊能正確的導(dǎo)入。還是開始的代碼：

import React from "react";

現(xiàn)在 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 屬性，運(yùn)行時就不會報錯了。

三、Tree Shaking

如果把 TS 按照 ES6 規(guī)范編譯，就不需要加上 esModuleInterop，只需要 allowSyntheticDefaultImports，防止靜態(tài)類型檢查時報錯。

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

什么情況下我們會考慮導(dǎo)出成 ES6 規(guī)范呢？多數(shù)情況是為了使用 webpack 的 tree shaking 特性，因?yàn)樗粚?ES6 的代碼生效。

順便再發(fā)散一下，講講 babel-plugin-component。

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

上面的代碼經(jīng)過編譯后，是下面這樣的：

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

// 轉(zhuǎn)換前
import { Button, Select } from 'element-ui'
// 轉(zhuǎn)換后
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');

看完上述內(nèi)容，是不是對Typescript內(nèi)置的模塊導(dǎo)入兼容方式的詳細(xì)解析有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞標(biāo)題：Typescript內(nèi)置的模塊導(dǎo)入兼容方式的詳細(xì)解析
本文來源：http://chinadenli.net/article10/gsjjgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站導(dǎo)航、用戶體驗(yàn)、品牌網(wǎng)站制作、網(wǎng)站建設(shè)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)