一、前言

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

二、import * as

考慮到兼容性，我們一般會(huì)將代碼編譯為 es5 標(biāo)準(zhǔn)，于是 tsconfig.json 會(huì)有以下配置：

{

 "compilerOptions": {

   "module": "commonjs",

   "target": "es5",

 }

}

代碼編譯后最終會(huì)以 commonJS 的形式輸出。

使用 React 的時(shí)候，這種寫法 import React from "react" 會(huì)收到一個(gè)莫名其妙的報(bào)錯(cuò)：

Module "react" has no default export

這時(shí)候你只能把代碼改成這樣：import * as React from "react"。

究其原因，React 是以 commonJS 的規(guī)范導(dǎo)出的，而 import React from "react" 這種寫法會(huì)去找 React 模塊中的 exports.default，而 React 并沒(méi)有導(dǎo)出這個(gè)屬性，于是就報(bào)了如上錯(cuò)誤。而 import * as React 的寫法會(huì)取 module.exports 中的值，這樣使用起來(lái)就不會(huì)有任何問(wèn)題。我們來(lái)看看 React 模塊導(dǎo)出的代碼到底是怎樣的（精簡(jiǎn)過(guò)）：

...

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)出的是一個(gè)對(duì)象，自然也不會(huì)有 default 屬性。

二、esModuleInterop

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

{

 "compilerOptions": {

   "module": "commonjs",

   "target": "es5",

   "allowSyntheticDefaultImports": true,

   "esModuleInterop": true

 }

}

其中 allowSyntheticDefaultImports 這個(gè)字段的作用只是在靜態(tài)類型檢查時(shí)，把 import 沒(méi)有 exports.default 的報(bào)錯(cuò)忽略掉。

而 esModuleInterop 會(huì)真正的在編譯的過(guò)程中生成兼容代碼，使模塊能正確的導(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"));

編譯器幫我們生成了一個(gè)新的對(duì)象，將模塊賦值給它的 default 屬性，運(yùn)行時(shí)就不會(huì)報(bào)錯(cuò)了。

三、Tree Shaking

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

{

 "compilerOptions": {

   "module": "es6",

   "target": "es6",

   "allowSyntheticDefaultImports": true

 }

}

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

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

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

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

var a = require('element-ui');

var Button = a.Button;

var Select = a.Select;

var a = require('element-ui') 會(huì)引入整個(gè)組件庫(kù)，即使只用了其中的 2 個(gè)組件。

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'

最終編譯出來(lái)是這個(gè)樣子，只會(huì)加載用到的組件：

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

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

四、總結(jié)

本文講解了 TypeScript 是如何導(dǎo)入不同模塊標(biāo)準(zhǔn)打包的代碼的。無(wú)論你導(dǎo)入的是 commonJS 還是 ES6 的代碼，萬(wàn)無(wú)一失的方式是把 esModuleInterop 和 allowSyntheticDefaultImports 都配置上。