AMD规范是什么

参考链接：https://blog.csdn.net/qq_43267592/article/details/103918703
1、定义
AMD规范全称是Asynchronous Module Definition，即异步模块加载机制。它完整描述了模块的定义，依赖关系，引用关系以及加载机制。
2、应用
AMD对应的就是很有名的RequireJS。下面看一下如何使用require.js

（1）下载require.js，https://requirejs.org/docs/download.html
（2）引用js

<script src="js/require.js" data-main="js/main"></script>
//data-main属性的作用是，指定网页程序的主模块，它会在require.js加载完成后首个加载

（3）语法

define([id], [dependencies], factory)
//参数：
//id：可选，字符串类型，定义模块标识，如果没有提供参数，默认为文件名
//dependencies：可选，字符串数组，AMD 推崇依赖前置，即当前模块依赖的其他模块，模块依赖必须在真正执 行具体的factory方法前解决
//factory：必需，工厂方法，初始化模块需要执行的函数或对象。如果为函数，它只被执行一次。如果是对象，此对象会作为模块的输出值。

例如：

define(['jquery'], function () {
   // 方法
   function myFunc(){};
   // 暴露公共方法
   return myFunc;
   });

（4）模块写法
一般情况下主模块都会依赖于其他模块，此时则需要使用AMD规范定义的的require()函数

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
				// 代码
});

// require()函数接受两个参数。
// 第一个参数是一个数组，表示所依赖的模块，上例就是[‘moduleA’, ‘moduleB’, ‘moduleC’]，即主模块依赖这三个模块；
// 第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。

加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。
require()异步加载moduleA，moduleB和moduleC，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。

例子：假定主模块main.js依赖jquery、underscore和backbone这三个模块，就可以这样写：

require(['jquery', 'underscore', 'backbone'], function (Backbone){
   // 代码
});

require.js会先加载jQuery、underscore和backbone，然后再运行回调函数。主模块的代码就写在回调函数中。

CommonJs是什么

参考链接：https://www.cnblogs.com/xixiaoxi/p/12588784.html

1、定义
CommonJS是一种被广泛使用的js模块化规范，核心思想是通过require方法来同步加载依赖的其他模块，通过module.exports导出需要暴露的接口。
2、使用
（1）Module对象
Node内部提供一个Module构建函数。所有模块都是Module的实例。

//a.js文件中输出module对象
console.log(module);

输出：

Module {
  //模块的识别符，通常是带有绝对路径的模块文件名。
  id: '.',
  //当前模块的路径
  path: 'C:\\Users\\LiZhiTong\\Desktop\\webpack资料\\test\\01',
//表示模块对外输出的值。
  exports: {},
 //表示调用该模块的模块。
  parent: null,
  //模块的文件名，带有绝对路径。
  filename: 'C:\\Users\\LiZhiTong\\Desktop\\webpack资料\\test\\01\\a.js',
//返回一个布尔值，表示模块是否已经完成加载。
  loaded: false,
//返回一个数组，表示该模块要用到的其他模块。
  children: [],
 //模块的搜索路径（依次向上级目录搜索）
  paths: [
	'C:\\Users\\LiZhiTong\\Desktop\\webpack资料\\test\\01\\node_modules',
	'C:\\Users\\LiZhiTong\\Desktop\\webpack资料\\test\\node_modules',
	'C:\\Users\\LiZhiTong\\Desktop\\webpack资料\\node_modules',
	'C:\\Users\\LiZhiTong\\Desktop\\node_modules',
	'C:\\Users\\LiZhiTong\\node_modules',
	'C:\\Users\\node_modules',
	'C:\\node_modules'
  ]
}

（2）exports
module.exports属性表示当前模块对外输出的接口，它是一个对象，其他文件加载该模块，实际上就是读取module.exports变量。
每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

//一般直接使module.exports指向一个新的对象，并向外提供资源
module.exports = {
	num: 1,
	msg: "hello",
	getNum() {
		return this.num;
	},
	setMsg(str) {
		this.msg = str;
	}
};

（3）require
require命令的基本功能是，读入并执行一个JavaScript文件，然后返回该模块的exports对象。如果没有发现指定模块，会报错。

const info=require('./lib');//后缀名可以省略,默认为.js,

根据参数的不同格式，require命令去不同路径寻找模块文件,如果参数字符串不以“./“或”/“开头，则表示加载的是一个默认提供的核心模块（位于Node的系统安装目录中），或者一个位于各级node_modules目录的已安装模块（全局安装或局部安装）。

AMD和CommonJs的区别

CommonJS和AMD都是用于JavaScript模块化的标准。它们的主要区别在于依赖加载方式和用途。

CommonJS是一种用于后端JavaScript环境（如Node.js）的模块化规范，它支持同步加载，也就是在模块内部同步地加载依赖。在Node.js中，模块使用require()函数来引入其他模块，并使用module.exports来导出模块接口。

而AMD（异步模块定义）则是一种用于前端JavaScript环境（如浏览器）的模块化规范，它支持异步加载，也就是在模块内部异步地加载依赖。在AMD中，模块使用define()函数来定义，使用require()函数来异步加载其他模块。

另外，AMD通常用于浏览器端的模块化开发，而CommonJS通常用于后端开发和构建工具（如Webpack）中。由于AMD具有异步加载的能力，因此更适合于大型Web应用程序中的动态加载，而CommonJS更适合于小型应用程序的快速启动。

总的来说，CommonJS和AMD都是有效的标准，选择哪种标准主要取决于项目的具体需求和场景。

webpack

webpack的产生

随着前端的发展，javascript引入了很多思想和技术，例如：模块化、TypeScript、Scss、Less等，这让我们开发更快，但是，这些新的文件格式只有转换成javascript、css等，游览器才能识别，人工转换太过繁琐，所以webpack应运而生。

webpack是什么

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

webpack的使用

参考链接：https://www.cnblogs.com/hfxm/p/8406235.html

下面只是基础介绍，详细介绍请看参考链接。

1、安装
Webpack可以使用npm安装，新建一个空的练习文件夹（此处命名为webpack sample project），在终端中转到该文件夹后执行下述指令就可以完成安装。

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

2、准备工作

（1）初始化
在上述练习文件夹中创建一个package.json文件，这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件

npm init
// 项目名称，项目描述，作者等信息，回车默认即可。

（2）安装
package.json文件已经就绪，我们在本项目中安装Webpack作为依赖包

// 安装Webpack
npm install --save-dev webpack

（3）创建文件

回到之前的空文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来我们再创建三个文件:

• index.html --放在public文件夹中;
• Greeter.js-- 放在app文件夹中;
• main.js-- 放在app文件夹中;

（4）代码

index.html
我们在index.html文件中写入最基础的html代码，它在这里目的在于引入打包后的js文件（这里我们先把之后打包后的js文件命名为bundle.js，之后我们还会详细讲述）。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="utf-8">
	<title>Webpack Sample Project</title>
  </head>
  <body>
	<div id='root'>
	</div>
	<script src="bundle.js"></script>
  </body>
</html>

Greeter.js
我们在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块：

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

main.js
main.js文件中我们写入下述代码，用以把Greeter模块返回的节点插入页面。

//main.js
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

3、使用webpack
webpack可以在终端中使用，在基本的使用方法如下：

# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，
# {destination for bundled file}处填写打包文件的存放路径
# 填写路径的时候不用添加{}
webpack {entry file} {destination for bundled file}

指定入口文件后，webpack将自动识别项目所依赖的其它文件，不过需要注意的是如果你的webpack不是全局安装的，那么当你在终端中使用此命令时，需要额外指定其在node_modules中的地址，继续上面的例子，在终端中输入如下命令

# webpack非全局安装的情况
node_modules/.bin/webpack app/main.js public/bundle.js

可以看出webpack同时编译了main.js 和Greeter,js,现在打开index.html,可以看到如下结果

4、通过配置文件使用
在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件，我们在其中写入如下所示的简单配置代码，目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径。

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
	path: __dirname + "/public",//打包后的文件存放的地方
	filename: "bundle.js"//打包后输出文件的文件名
  }
}
// 注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

有了这个配置之后，再打包文件，只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了，这条命令会自动引用webpack.config.js文件中的配置选项，示例如下：

5、npm的打包
对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，设置方法如下。

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
	"start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
	"webpack": "3.10.0"
  }
}
// package.json中的script会安装一定顺序寻找命令对应位置，本地的node_modules/.bin路径就在这个寻找清单中，所以无论是全局还是局部安装的Webpack，你都不需要写前面那指明详细的路径了。

npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build，我们在命令行中输入npm start试试，输出结果如下：