vue require(‘./expample.js).default详解
文章目录前言一、前置知识二、export default为什么是语法糖三、如何require一个ES6 Module前言import 是静态编译的,而 require 可以动态加载,也就是说你可以通过判断条件来决定什么时候去 require ,而 import 则不行,所以有时候我们会面临需要通过require 去导入一个es6模块。提示:以下是本篇文章正文内容,下面案例可供参考一、前置知识1、E
前言
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}
是不是就能清楚一点了呢。
我们的疑问也就迎刃而解了。
更多推荐
所有评论(0)