JavaScript 和 typeScript 中的 import、from

From：https://segmentfault.com/a/1190000018249137?utm_source=tag-newest

• Github - allowSyntheticDefaultImports should be the default?
• exports、module.exports和export、export deault到底是咋回事

JavaScript 中有多种 export 的方式，而 TypeScript 中针对这种情况做了多种 import 语法，最常见的就是 import * as path from 'path' 这种。下面来讲解 TypeScript 中不同的 import 具有什么意义。

1、从 export 说起

关于 TypeScript 中不同 import 的含义，最典型的就是下面的 import 语法：

import * as path from 'path'

不少人疑问这句代码究竟是什么意思，这里要先从 js 的 export 开始说。

首先，JavaScript 的模块化方案，在历史的演进中，有多种导出模块的方式：

• exports
• module.exports
• export
• export default

在 nodejs 中内置的模块遵循的都是 CommonJS 规范，语法为 module.exports 和 exports。

// 模块中的 exports 变量指向 module.exports
// 这篇文章不会深入讲解 module.exports 和 exports 的关系

module.exports = function () { }
exports.site = 'https://tasaid.com'
module.exports.name = 'linkFly'

例如 nodejs 内置的 events 模块的源码：

在 ECMAScript 6 中又新增了语法 export 和 export default:

export default function () { }
export const site = 'https://tasaid.com'
export const name = 'linkFly'

到这里画风还比较正常，而大名鼎鼎的 JavaScript 转码编译器 babel 针对 ECMAScript 6 新增的 export default 语法，搞了个 babel-plugin-transform-es2015-modules-commonjs 的转换插件，用于将 ECMAScript 6 转码为 CommonJs 规范的语法：

源码：export default 42;

编译后：

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = 42;

到这里，我们看到有三种