比来总碰到类似于

var a = require(‘./expample.js).default

这样的代码，觉得很奇葩，总结一波。

为什么会呈现这个问题?

import 是静态编译的，而 require 可以动态加载，也就是说你可以通过判断条件来决定什么时候去 require ，而 import 则不行，所以有时候我们会面临需要通过require 去导入一个es6模块（好比react-hot-loader官方demo :P）

固然，这只是场景之一。

前置常识

ES6 Module常用语法。譬如export导出模块接口 | import 倒入模块| export default语法糖

Node.js模块常用。譬如module.exports | require

ES6模块与commonjs模块的区别（静态编译与动态加载 | 值得引用与值的拷贝）

如果上述前置常识您有所不了解的话，建议拜读一下阮一峰老师的《ECMAScript 6 入门》一书中的两个章节：

Module 的语法

Module 的加载实现

如果您已经具备了上述常识，我们来讨论一下

export default为什么是语法糖

require一个ES6 Module

export default为什么是语法糖

default关键字 说白了，就是别号(as)的语法糖

以下代码该当长短每每见的：

导出接口

// a.js function a(){} export {a}

导入模块

// b.js import {a} from ‘./a‘

花括号就是解构赋值的语法，我们可以理解为export导出了一个东西，东西里存在a这个函数，就像下面这样

{ a:function(){} }

于是就有了后面的通过布局赋值取出a，所以变量名必需一致。

ECMAScript 6 入门：畴前面的例子可以看出，使用import命令的时候，，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户必定但愿快速上手，未必愿意阅读文档，去了解模块有哪些属性和要领。
为了给用户供给便利，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

default可以理解为这一语法的语法糖

导出接口

// d.js export default function() {} // 等效于： function a() {}; export {a as default};

导入模块

import a from ‘./d‘; // 等效于，或者说就是下面这种写法的简写，是同一个意思 import {default as a} from ‘./d‘;

这个语法糖的好处就是import的时候，可以省去花括号{}。

简单的说，如果import的时候，你发明某个变量没有花括号括起来（没有*号），那么你在脑海中应该把它还原成有花括号的as语法。

素质上依旧是布局赋值呀，只不过我们写的更为简便，假装花括号消掉了罢了。

如何require一个ES6 Module

stackoverflow上有一个针对本文标题问题对照好的回答，原文如下：

Finally, the require and require.default... when dealing with ES6 imports (export default MyComponent), the exported module is of the format {"default" : MyComponent}. The import statement correctly handles this assignment for you, however, you have to do the require("./mycomponent").default conversion yourself. The HMR interface code cannot use import as it doesn‘t work inline. If you want to avoid that, use module.exports instead of export default.

我来翻译下：

最后，require和require.default...当在node中措置惩罚惩罚ES6 模块(export default mycomponent)导入的时候，导出的模块格局为

{ "default": mycomponent }

import 语句正确地为你措置惩罚惩罚了这个问题，然而你必需本身执行 require("./mycomponent").default. HMR(热更新模块)不在 inline 模式事情的情况下，接口代码不能使用 import ，如果你想制止，使用module.exports而不是export default;

上文提到过，export 关键字是导出一个东西，东西内存在一个属性(我们要袒露的)，export default 则是 export 语法糖，import 一个export default 袒露出来的模块包罗了解构赋值的法式，所以在node中使用require去请求一个export default的模块需要我们通过.语法去取出东西中的属性(因为require木有解构赋值)，清晰明了。

换个说法，如果 require 的 commonjs规范的模块，即：
导出：

// a.js module.exports = { a:‘helloworld‘ }

导入：

// b.js var m = require(‘./a.js‘); console.log(m.a); // helloworld

这样就显得非常清晰，我们 module.exports 的是啥，require 的就是啥。

但export default包装了一层语法糖，让我们看得不甚清晰：

const a = ‘helloworld‘; export default a;

其实导出的是

{ "default": a }

而并非 a 这个变量，这就是我为什么之前要强调语法糖了，如果你将 export default 还原为：

const a = ‘helloworld‘; export {a as default}

是不是就能清楚一点了呢。

我们的疑问也就迎刃而解了。

注：以上所有代码都是在webpack开发环境（babel）中运行（保证ES6模块语法可以被识别）。

参考：Node中没搞大白require和import，你会被坑的很惨

标签：

原文地点：https://www.cnblogs.com/ygunoil/p/12152364.html