详解Typescript 内置的模块导入兼容方式
一、前言
前端的模块化规范包括commonJS、AMD、CMD和ES6。其中AMD和CMD可以说是过渡期的产物，目前较为常见的是commonJS和ES6。在TS中这两种模块化方案的混用，往往会出现一些意想不到的问题。
二、import*as
考虑到兼容性，我们一般会将代码编译为es5标准，于是tsconfig.json会有以下配置：
{
"compilerOptions":{
"module":"commonjs",
"target":"es5",
}
}
代码编译后最终会以commonJS的形式输出。
使用React的时候，这种写法importReactfrom"react"会收到一个莫名其妙的报错：
Module"react"hasnodefaultexport
这时候你只能把代码改成这样：import*asReactfrom"react"。
究其原因，React是以commonJS的规范导出的，而importReactfrom"react"这种写法会去找React模块中的exports.default，而React并没有导出这个属性，于是就报了如上错误。而import*asReact的写法会取module.exports中的值，这样使用起来就不会有任何问题。我们来看看React模块导出的代码到底是怎样的（精简过）：
...
varReact={
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会真正的在编译的过程中生成兼容代码，使模块能正确的导入。还是开始的代码：
importReactfrom"react";
现在TS编译后是这样的：
var__importDefault=(this&&this.__importDefault)||function(mod){
return(mod&&mod.__esModule)?mod:{"default":mod};
};
Object.defineProperty(exports,"__esModule",{value:true});
varreact_1=__importDefault(require("react"));
编译器帮我们生成了一个新的对象，将模块赋值给它的default属性，运行时就不会报错了。
三、TreeShaking
如果把TS按照ES6规范编译，就不需要加上esModuleInterop，只需要allowSyntheticDefaultImports，防止静态类型检查时报错。
{
"compilerOptions":{
"module":"es6",
"target":"es6",
"allowSyntheticDefaultImports":true
}
}
什么情况下我们会考虑导出成ES6规范呢？多数情况是为了使用webpack的treeshaking特性，因为它只对ES6的代码生效。
顺便再发散一下，讲讲babel-plugin-component。
import{Button,Select}from'element-ui'
上面的代码经过编译后，是下面这样的：
vara=require('element-ui');
varButton=a.Button;
varSelect=a.Select;
vara=require('element-ui')会引入整个组件库，即使只用了其中的2个组件。
babel-plugin-component的作用是将代码做如下转换：
//转换前
import{Button,Select}from'element-ui'
//转换后
importButtonfrom'element-ui/lib/button'
importSelectfrom'element-ui/lib/select'
最终编译出来是这个样子，只会加载用到的组件：
varButton=require('element-ui/lib/button');
varSelect=require('element-ui/lib/select');
四、总结
本文讲解了TypeScript是如何导入不同模块标准打包的代码的。无论你导入的是commonJS还是ES6的代码，万无一失的方式是把esModuleInterop和allowSyntheticDefaultImports都配置上。
到此这篇关于详解Typescript内置的模块导入兼容方式的文章就介绍到这了,更多相关Typescript内置模块导入兼容内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！