Nodejs和ES6的模块化

一、Node的模块化

1.基本

 node的模块化基于CommonJs(CMD)规范来实现的

module.exports(模块标记)

exports(模块导出)

require(模块导入)

module.exports

默认是一个模块对象

定义到该模块对象中的任何方法都会直接保留给使用者

 

require

永远导出的是   module.exports

 

exports

exports 是 module.exports 的引用

exports = module.exports = { }

exports 一旦和module.exports没有关系,那么exports就会不再具备导出的功能

//exports.js

//exports = {
//    say:function(){
//        console.log("++++++++++++");
//    }
//}

exports.name = "张三";
exports.say = function(){
	console.log("谁在说话?")
}

//在终端输入 node exports.js

上部代码返回可视化结果=>{ }

下部代码返回可视化结果=>
name:"张三"
say："谁在说话?"

 

 

Node中的this的指向问题

node中的this永远指向globel  而基于浏览器的js代码中,this永远指向了 基层 windows.

 

 

二、ES6中的模块化

export命令

一个模块是一个独立的文件，该文件内部的所有变量，外部无法获取，但是，通过export关键字输出就可以使外部访问到这个变量

export命令规定的是对外的接口，必须与模块内部的变量建立一一对应的关系，也就是说外部接口需要用这个接口引用

export let first = 1;

export let sec = new Date();
//时间对象

export let array = [1,2,3,4,5,6];

export let add = function(a,b){
    console.log(a+b);
}



//export {first as a , sec as b, add as sum }

//export default {
	name:"san"
};

在终端运行此段代码之前，首先会遇到一个问题 ： Cannot use import statement outside a module / /不能在模块外使用import语句

Node 环境将以 ES6模块化编程的形式解析模块， require 函数将不能使用

同时，终端的node也会为我们提供解决方法 ：要加载ES模块，请在package.json中设置“type”：“module”或使用.mjs扩展名。

但是，这两种方法适合初学者，在之后的学习，会有nodejs中的其他方法来替代这两种方法
 

//package.json
//文件名必须为package.json

{
    "type":"module"
}


//注意在真正的json文件中，属性名和属性必须添加双引号 ""

此时，前端所写的export文件已经可以被node识别

并输出

//import.js文件
//接收
import { first,sec,array,add } from './export.js';
console.log(a,b)
add(3,5)

[Module:null prototype]{
    
    1 , 2021-04-28T11:07:52.219Z,
    
    8    //3+5

}



import * as e from './es6-export.js';

[Module:null prototype]{
    first:1,
    add:2021-04-28T11:07:52.219Z,
    array: [ 1, 2, 3, 4, 5, 6 ],
    sum:[Function: add]

}

//显示全部数据

as： 用来给变量起别名

export  通过export导出的数据，在导入的时候必须使用 {...} 来获取对应的数据

 

default:默认值

export default  特点

• 它后面不能跟变量声明语句,可以直接将一个值卸载export default之后
• 在一个文件或模块中,export, import 可以有对各,但是export default仅有一个
•  export default中的 default 是对应的导出接口变量
• 通过export 方式导出时要加 { } ,export default 则不需要
• export default向外暴露的成员,可以使用任意变量来接收

在浏览器中 使用es6模块化

<script type="module">
    
    import ... from ...

</script>