js模块化学习记录

js模块化

一、基于commonjs的module.exports和exports暴露模块

1.module.exports和exports默认是一个对象

相当于 module.exports = {}，exports = {}

2.module.exports = value和exports.xxx= value，value可以为任何数据类型。

module.exports = value 表示value会覆盖掉原来的默认值{}
exports.xxx = value 表示可以给exports这个对象添加属性

二、基于commonjs的require导入模块

1.例子

运行环境为服务端node
步骤：
首先建一个文件夹（自命名），使用vscode打开，ctrl+~打开控制台执行 npm init -y
然后建一个modules文件夹，放两个js文件：module1.js和module2.js。
然后在当前项目目录，即根目录建一个app.js文件导入文件。

module1.js
let fn = function() {
	console.log('module')
}
module.exports = fn

module2.js
let arr = [1,2,3,4,5];
exports.arr = arr;

app.js
const fn = require('./modules/module1.js');
const {arr} = require('./modules/module2.js');
//这里的{arr}是ES6的语法解构赋值，module2.js中不是向外暴露了一个对象吗？所以对象里面的属性解构出来使用，就不用对象.属性
fn();//fn导入直接使用，上面说过module.exports的对象会被覆盖，所以导入可以直接使用。
console.log(arr);

最后在控制台输入node app.js执行

三、ES6模块化语法

1.模块导出

1.1 分别暴露

module1.js文件
export let name = "张三";

export function fn() {
	console.log("分别暴露");
}

导入

index.vue文件
import { name,fn } from './modules/module1.js'

1.2 统一暴露

module2.js文件
let sex = "男";
function getName() {
console.log("统一暴露");
}

export = { sex,getName }

index.vue文件
import { sex,getName } from './modules/module2.js'

1.3 默认暴露

module3.js文件
export default {
    home: '广州',
    change: function(){
        console.log("默认暴露");
    }
}

index.vue文件
import address from './modules/module3.js'
//这里的address就表示默认导出的对象

ok，文章学到这里。