vue require(‘./expample.js).default详解

---

前言

import 是静态编译的，而 require 可以动态加载，也就是说你可以通过判断条件来决定什么时候去 require ，而 import 则不行，所以有时候我们会面临需要通过require 去导入一个es6模块。

---

一、前置知识

1、ES6 Module常用语法。譬如export导出模块接口 | import 倒入模块| export default语法糖
2、Node.js模块常用。譬如module.exports | require
3、ES6模块与commonjs模块的区别（静态编译与动态加载 | 值得引用与值的拷贝）

如果上述前置知识您有所不了解的话，建议拜读一下阮一峰老师的《ECMAScript 6 入门》一书中的两个章节：
1、Module 的语法
2、Module 的加载实现
如果您已经具备了上述知识，我们来讨论一下
1、export default为什么是语法糖
2、require一个ES6 Module

二、export default为什么是语法糖

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

以下代码应当是非常常见的：

导出接口

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

导入接口

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

三、如何require一个ES6 Module

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}

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

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