简介:
主要介绍node.js中的模块化,以及es6模块化与node.js模块化这两个模块化的区别
1.node.js的模块化CommonJS
先看两种导出的模式
//第一种方式
exports.name = "aa"
exports.age = 12
//第二种方式
module.exports.name = "bb"
module.exports.age = 12
module.exports.sayHello = function(){
//这里导出的是一个函数
log('hello')
}
第3段中会用到对象方式导出
这两种方式一个是exprots,另一个module.exprots。它们之间的区别就是,exprots是一个指向
module.exprots的引用。module.exprots的初始值是一个空对象{},所以exprots初始值也是{}。
但是module.exprots可以单独定义,返回数据类型。exprots只能返回的是一个object对象。
//导出 a.js
module.exprots = ['a','b','c']
//导出 b.js
exprots = ['a','b','c']
//导入a.js
var mymodule = require.('a.js')
log(mymodule) // 结果为 ['a','b','c']
//导入b.js
var mymodule = require.('b.js')
log(mymodule) // 结果为{}
CommonJS 规定:
(1)每个模块内部,module 变量代表当前模块。
(2)module 变量是一个对象,它的 exports 属性(即 module.exports)是对外的接口。
(3)加载某个模块,其实是加载该模块的 module.exports 属性。require() 方法用于加载模块。
2.与ES6的不同
- CommonJS 模块是 Node.js 专用的,与 ES6 模块不兼容。而ES6模块化在浏览器和node.js中都可以用。
- 语法上面,两者最明显的差异是,CommonJS 模块使用require()和module.exports,ES6 模块使用import和export。
- CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。(可用在加载组件的时候动态加载)
- 在node.js使用模块化,需要将 CommonJS 脚本的后缀名都改成.cjs,ES6 模块采用.mjs后缀文件名。或者修改package.son里面的文件,type字段为module或commonjs。
3.如何require一个ES6 Module
先了解两个概念,还有default的意思:
1.使用require 是 CommonJS的模块导入方式,不支持模块的默认导出,因此导入的结果其实是一个含 default 属性的对象,因此需要使用 .default 来获取实际的组件选项。
2.使用 ES6 的 import 语句,ES6 的模块化导入导出语法。import 时需要给定一个变量名,所有 import 语句必须统一放在模块的开头。
node.js导出模式
//导出
module.exports = {
a: 'hello'
}
//导入
var b =require('./a.js')
log(b.a) //hello
这里我们module.exports导出的啥,require得到的就是啥。({a:'hello'} 这个对象)
es6导出模式
const a = 'hello'
exprort default a;
这样导出的其实是{ "default" : a }
,这样的并非是原来的a变量。还原其实就是这样的写法
const a = 'hello'
exprort { a as default };
如果 .vue 文件中使用的本来就是 CommonJS 或者 AMD 的模块化系统语法,导出的是 module.exports 对象作为组件选项,那么使用 require 导入时就不需要使用 .default 来获取。