Typescript 內置的模塊導入兼容方式

2020-6-4    seo達人

一、前言

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


二、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 的規(guī)范導出的,而 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 這個字段的作用只是在靜態(tài)類型檢查時,把 import 沒有 exports.default 的報錯忽略掉。

而 esModuleInterop 會真正的在編譯的過程中生成兼容代碼,使模塊能正確的導入。還是開始的代碼:


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 屬性,運行時就不會報錯了。


三、Tree Shaking

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


{

 "compilerOptions": {

   "module": "es6",

   "target": "es6",

   "allowSyntheticDefaultImports": true

 }

}

什么情況下我們會考慮導出成 ES6 規(guī)范呢?多數(shù)情況是為了使用 webpack 的 tree shaking 特性,因為它只對 ES6 的代碼生效。


順便再發(fā)散一下,講講 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 都配置上。

日歷

鏈接

個人資料

藍藍設計的小編 http://m.sillybuy.com

存檔