详解Typescript 内置的模块导入兼容方式


Posted in Javascript onMay 31, 2020

一、前言

前端的模块化规范包括 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 是如何导入不同模块标准打包的代码的。无论你导入的是 commonJS 还是 ES6 的代码,万无一失的方式是把 esModuleInterop 和 allowSyntheticDefaultImports 都配置上。

到此这篇关于详解Typescript 内置的模块导入兼容方式的文章就介绍到这了,更多相关Typescript 内置模块导入兼容内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
详解jQuery中的事件
Dec 14 Javascript
javascript常用的设计模式
Feb 09 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 #Javascript
JQuery获得内容和属性方法解析
May 30 #jQuery
JavaScript Window浏览器对象模型原理解析
May 30 #Javascript
基于canvasJS在PHP中制作动态图表
May 30 #Javascript
jQuery实现视频展示效果
May 30 #jQuery
vue实现购物车加减
May 30 #Javascript
基于vue和bootstrap实现简单留言板功能
May 30 #Javascript
You might like
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
thinkphp分页实现效果
2016/10/13 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
javascript各种复制代码收集
2008/09/20 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
javascript中如何处理引号编码"
2013/08/15 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
Python 统计字数的思路详解
2018/05/08 Python
python实现自动发送报警监控邮件
2018/06/21 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
python plotly绘制直方图实例详解
2019/07/22 Python
python两种注释用法的示例
2020/10/09 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
医院总经理职责
2013/12/26 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
趣味运动会简讯
2015/07/20 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
python数字图像处理实现图像的形变与缩放
2022/06/28 Python