文章目录
CommonJS 规范:nodejs中遵守的就是commonjs规范。
ES6 模块化规范:(前后端通用的模块化规范;Node.js、Vue、React 中都能使用!)
一、ES6模块化规范
学习模块化规范前我们需要学习一个转码工具,将高版本代码转化为低版本代码
1)babel转码工具
1.初始化项目
npm init
npm init -y 快速初始化项目
2.安装转码工具
cnpm install -g babel-cli
cnpm install --save -dev babel-cli babel-preset-latest
3.安装转换规则
cnpm install -g babel-preset-latest
4.指定转换规则 新建.babelrc
{
"presets":["latest"]
}
5.也可以将ES6转换为ES5之后的文件输入到另一个文件当中
babel 2-hello.js --out-file 2-helloo.js
6.将整个src目录下的es6文件转换成es5文件到dist目录
babel src --out-dir dist
2)模块导入导出
模块功能主要由两个命令构成:export
和 import
• export 命令
用于规定模块的对外接口 。
• import 命令
用于输入其他模块提供的功能。
1.列表导出导入
导出m1.js
let name="zs";
let age=17;
export={
name,
age
}
导入m2.js
let {name,age} from './m1.js'
console.log(name,age);
运行结果:
2.单个导出导入
导出m1.js
export let name = 'zs';
export function get() {
console.log("123")
}
导入m2.js
import { name, get } from "./m1"
console.log(name);
get()
运行结果:
3.重命名导出导入
导出m1.js
let name = "zs";
let age = 17;
export { name as n, age as a }
导入m2.js
import { a as x1, n as x2 } from './m1'
console.log(x1, x2);
import { a, n } from './m1'
console.log(a, n);
运行结果:
4.默认导出导入
注意: 一个页面只有一个export default
导出m1.js
let name = "zs";
let age = 17;
export default {
name,
age
}
导入m2.js
import person from "./m1"
console.log(person.age, person.name)
运行结果:
5.导入export和默认导出
导出m1.js
let name = "zs";
let age = 17;
export default {
name,
age,
b: '默认导出'
}
export { name, age }
导入m2.js
import * as obj from "./m1"
console.log(obj)
运行结果:
5.导入之后又全部导出
导出m1.js
let sex = "0";
export { sex}
导出m2.js
export let name = "zs";
export let age = 17;
m1,m2导入m3后导出
export * from "./m1.js"
export * from "./m2.js"
导入m4
import * as obj from "./m3.js"
console.log(obj)
运行结果:
二、CommonJs模块化规范
- 使用
require()
方法,可以加载需要的用户自定义模块 - 使用
module.exports
对象,将模块内的成员共享出去,供外界使用。
注意: 使用 require() 方法导入模块时,导入的结果,永远以 module.exports 指向的对象为准
代码示例:
modules.js
// 向 module.exports 对象上挂载 username 属性
module.exports.username = 'zs'
// 向 module.exports 对象上挂载 sayHello 方法
module.exports.sayHello = function() {
console.log('Hello!')
}
// 让 module.exports 指向一个全新的对象
module.exports = {
nickname: '小黑',
sayHi() {
console.log('Hi!')
}
}
引入并使用模块:
const modules=require("./modules.js");
modules.sayHi();
- exports 对象
为了简化向外共享成员的代码,Node 提供了 exports 对象。默认情况下,exports
和module.exports
指向同一个对象
。最终共享的结果,还是以 module.exports 指向的对象为准
。
代码示例:
const username = 'zs'
module.exports.username = username
exports.age = 20
exports.sayHello = function() {
console.log('大家好!')
}
- exports 和 module.exports 的使用误区
案例一:
案例二:
案例三:
Node.js 遵循了 CommonJS 模块化规范
,CommonJS 规定了模块的特性和各模块之间如何相互依赖
。
CommonJS 规定:
① 每个模块内部,module
变量代表当前模块。
② module 变量是一个对象,它的 exports 属性
(即 module.exports)是对外的接口
。 ③ 加载某个模块,其实是加载该模块的 module.exports 属性。require() 方法用于加载模块。
三、ES6模块与CommonJS模块的差异
1.commonjs在运行时候加载模块,ES6编译的时候加载模块;
2.commonjs输出的是一个值得复制/深拷贝,ES6输出的是一个值得引用;
案例:
CommonJS规范:
导出m1.js
let firstName = "ren";
let lastName = "terry";
module.exports = {
firstName,
lastName
};
setTimeout(() => {
firstName = "zhao"
}, 2000);
导入m2.js
let { firstName, lastName } = require('./7.modules')
console.log(firstName, lastName);//
setTimeout(() => {
console.log(firstName, lastName)
}, 4000)
运行结果:
由此可以得出commonjs引入的是值的拷贝
ES6模块化规范:
导出m1.js
let first = "ren";
let lastName = "xlz";
export {
first,
lastName
}
setTimeout(() => {
first = "zhao"
}, 2000);
导入m2.js
import { first, lastName } from './7.modules';
console.log(first, lastName)
setTimeout(() => {
console.log(first, lastName)
}, 4000)
运行结果:
由此可以看出ES6模块化规范引入的是一个值得引用