Nodejs和ES6的模块化

最新推荐文章于 2024-08-13 16:49:07 发布

wan_da

最新推荐文章于 2024-08-13 16:49:07 发布

阅读量999

点赞数

分类专栏： ES6模块化文章标签： http

本文链接：https://blog.csdn.net/wan_da/article/details/116240319

版权

ES6模块化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文探讨了Node.js中的模块化机制，包括module.exports、exports和require的使用，以及this的指向问题。同时，介绍了ES6的模块化特性，如export和import命令，以及default导出的区别。通过示例展示了如何在Node环境中运行ES6模块，并解释了可能出现的问题及解决方案。

摘要由CSDN通过智能技术生成

一、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>