webpack-模块简介

Posted 2021-08-28 过往将来

文章目录

• • JavaScript模块化的历史
  • ES6 Module规范简介
  • CommonJS基本使用

javascript模块化的历史

1. 在JavaScript语言的开始,没有模块化方法,JavaScript最初是用来做脚本的,但是随着JavaScript的越来越强大,这时候出现了模块化的规范,比较著名的CommonJS规范,后来JavaScript提出了自己模块化规范ES6 Module（ES6模块化）
2. 目前，JavaScript模块化使用的主要是ES6 Module和CommonJS这两种。
3. CommonJS规范的目的是弥补JavaScript在服务器端缺少模块化机制

ES6 Module规范简介

1. ES6的模块化语法主要用import进行模块导入，export进行模块导出。

export模块导出

	  // a.js中

	  // 第一种写法
	  // 导出的模块有两个变量name和age，一个函数add
	  export var name = 'baidu';
	  export var age = 18;
	  export function add(a, b) {
	    return a + b;
	  }
	
	// 第二种写法
	  var name = 'baidu';
	  var age = 18;
	  function add(a, b) {
	    return a + b;
	  }
	  export { name, age, add };

import模块导入

	// 在b.js中
	// 对于模块a.js，我们使用大括号方式导出模块
	  import { name, age, add } from './a.js'
	  console.log(name, age);   // 控制台输出'baidu'和18
	  console.log(add(10, 8));   // 控制台输出18

2. export 还可以导出匿名模块,方便在导入的时候使用

 	// c.js	
	// 使用匿名(default)导出模块，这里导出的是一个对象
	  export default {
	    price: 20,
	    id: 1,
	  }

在d.js文件中,

// 对于匿名(default)导出的模块c.js，我们自定义一个变量moduleC代表其导出值
  // d.js
  import moduleC from './c.js'
  console.log(moduleC)   // 控制台输出一个对象｛price: 20, id: 1｝

CommonJS基本使用

1. CommonJS是目前比较流行的JS模块化规范，它主要在Node.js中使用。
2. CommonJS主要使用module.exports导出模块，require(’…’)导入模块。

 // a.js
  module.exports = {
    name: '百度',
    url: 'wwww.baidu.com'
  }

 // b.js
  var person = require('./a.js')
  console.log(person)  // 输出{name: '百度',url: 'wwww.baidu.com'}