5.js模块化

一、node.js模块化概念

模块化的概念和python中的模块是一样的概念。node.js中的模块化是遵顼的common.js标准
1.每一个js文件都是一个模块
2.在浏览器端： 浏览器是不认识node.js语法的，必须先要提前编译打包处理

二、模块加载

1.加载内置模块

const fs = require('fs')
1

2.加载第三方模块

const moment = require('moment')
1

3.加载自定义模块

const aaa = require('./aaa.js')
1

三、模块的作用域

模块的作用域主要是为了防止全局变量污染的问题

1.module模块

任何一个js文件都自带一个module模块

[root@node-2 front]# cat m1.js 
const user = 'zhangsan'
console.log(module)
1
2
3

[root@node-2 front]# node  m1.js 
Module {
  id: '.',
  path: '/root/front',
  exports: {},
  filename: '/root/front/m1.js',
  loaded: false,
  children: [],
  paths: [ '/root/front/node_modules', '/root/node_modules', '/node_modules' ]
}
1
2
3
4
5
6
7
8
9
10

2.exports 发布成员

自定义模块中向外发布成员，就需要使用module.exports来发布向外提供的变量以及函数

2.1 定义自定义模块文件

注意：向外发布函数的时候，函数前边不能加function关键字

[root@node-2 front]# cat m3.js 
module.exports = {
	'user' : 'zhangsan',
	'age': 20,
	test(){
		console.log('我是m3');
	}
}
1
2
3
4
5
6
7
8

2.2 引入模块和使用

[root@node-2 front]# cat index.js 
const m3 = require('./m3')
console.log(m3)
console.log(m3.user)
m3.test()

1
2
3
4
5
6

[root@node-2 front]# node index.js 
{ user: 'zhangsan', age: 20, test: [Function: test] }
zhangsan
我是m3

1
2
3
4
5

四、ES6模块化规范

简介：

每个js文件都是一个独立得模块
使用import关键字导入其它得模块成员
使用export关键字暴露自己得成员

在node.js中对ES6支持不是很好，ES6标准已经很普及了，大部分浏览器已经支持了了ES6标准。但是仍有极少部分浏览器或者低版本得浏览器不支持ES6标准。所有我们使用babel这个工具对ES6标准得代码转化成ES5规范得代码，然后在node环境中在运行代码。在浏览器中运行也是会转换为ES5标准得代码后在运行
当然我们后期使用VUE框架得时候，这些步骤框架会自动帮我们操作。以下实例就是为了在node.js环境中熟悉ES6语法

1.默认导入导出语法介绍：

1.1 默认导出

在模块js文件中暴露服务

export defaulut {
	需要暴露的变量1,
	需要暴露的变量2,
    函数...
}
1
2
3
4
5

1.2 默认导入

import "自定义名称" from 'xxx.js'
1

自定义名称尽量和模块文件名称一致。

2.安装babel相关包

注意点：此时使用npm安装得包 是局部生效，只在当前项目下生效。如果要是全局安装就是npm -g install

[root@node-2 ~]# cd /root/front/
[root@node-2 front]# npm install  @babel/core @babel/cli @babel/preset-env @babel/node
[root@node-2 front]# ls
node_modules  package.json  package-lock.json

#查看安装得相关包
[root@node-2 front]# npm ls
front@ /root/front
├── @babel/cli@7.19.3
├── @babel/core@7.19.6
├── @babel/node@7.19.1
└── @babel/preset-env@7.19.4


1
2
3
4
5
6
7
8
9
10
11
12
13
14

在全局查看，是看不到这些包得
[root@node-2 front]# npm ls -g
/usr/local/node/lib
├── corepack@0.12.1
└── npm@8.15.0
1
2
3
4
5

在安装babel/polyfill

[root@node-2 front]# npm install @babel/polyfill

#查看已经安装了完成
[root@node-2 front]# npm ls
front@ /root/front
├── @babel/cli@7.19.3
├── @babel/core@7.19.6
├── @babel/node@7.19.1
├── @babel/polyfill@7.12.1
└── @babel/preset-env@7.19.4

1
2
3
4
5
6
7
8
9
10
11

3.创建babel配置文件

在项目根目录下创建配置文件,加入以下配置

[root@node-2 front]# touch babel.config.js
const presets = [
	["@babel/env",{
		targets: {
			edge: "17",
			firefox: "60",
			chrome: "67",
			safari: "11.1"
		}
	}]
	
];

module.exports = {presets};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4.使用ES6语法测试

4.1 创建模块文件

const data1 = 'hello world'
const data2 = 20

function test(){
	console.log('我是m1的test函数！')
}

export default {
	data1,data2,
	test
}

1
2
3
4
5
6
7
8
9
10
11
12

4.2 引用模块文件

[root@node-2 front]# cat index.js 
import m1 from './m1'
console.log(m1)


#这里就看到了我们使用ES6语法暴露的m1模块文件的变量和函数
[root@node-2 front]# npx babel-node index.js 
{ data1: 'hello world', data2: 20, test: [Function: test] }

1
2
3
4
5
6
7
8
9

5.按需导入导出

5.1 模块文件

export const data1 = 'hello world'
export const data2 = 20

export function test(){
        console.log('我是m1的test函数！')
}

1
2
3
4
5
6
7

5.2 按需要导入

导入的时候就是直接导入模块中的变量名或者函数名了。就不能在自定义名称了

import { data2,data1 } from './m1'


console.log(data1,data2)
1
2
3
4