前端模块规范化(2) CommonJs

2019-04-21 15:52:14 阅读：219 来源： 互联网

标签：CommonJs require exports module js webpack 模块规范化

1、CommonJS是nodejs在后端应用时使用的标准，该规范的主要内容是，模块必须通过module.exports 导出对外的变量或接口，通过 require() 来导入其他模块的输出到当前模块作用域中。
（1）require用来加载模块
（2）通过exports和modul.exports来暴露模块中的内容
例：创建3个js，它们关系如下：
在这里插入图片描述
1.1、math.js
//注意commonjs在模块定义的变量只是模块内的变量，不是全局的，在每个模块内部，module变量代表当前模块。它的exports属性是对外的接口，将模块的接口暴露出去:module.exports

var PI = 3.14;

function multiple(num1, num2) {
	return num1 * num2;
}

function square(n) {
	return n * n;
}

module.exports = {
	PI: PI,
	multiple: multiple,
	square: square
}

1.2、s.js
//require中的结果就是main中exports出去的结果

var m = require('./math'); 

function circle(r) {
	return m.multiple(m.square(r), m.PI);
}

module.exports = {
	s_circle: circle
}

1.3、main.js

var s = require('./s');

console.log(s.s_circle(10));

1.4运行：在dos命令下
在这里插入图片描述
2、前端的webpack也是对CommonJS原生支持的。
1.1: 需用webpack将js文件打包：安装webpack

npm install webpack -g  //注：直接安装会安装最新版本的，打包js时要加-o

webpapck main.js  -o  output.js

//也可以直接指定版本安装：

 npm install webpack@3.5.3 -g //打包文件就可以不加-o，也避免了打包文件时出现很多错误：

webpapck main.js output.js

1.2 打包后就可以在目录下看到output.js文件啦，然后创建index.html，引入output.js就可以在前端运行了。
index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<script src="output.js"></script>
	</body>

</html>

标签：CommonJs,require,exports,module,js,webpack,模块,规范化
来源： https://blog.csdn.net/weixin_43846213/article/details/89433267

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端模块规范化(2) CommonJs