JS模块化(一):CommonJS
模块化的规范:
目前有四种:
1.CommonJS
2.AMD
3.CMD(了解)
4.ES6
CommonJS规范说明:
* 每个文件(js文件)都可以作为一个模块
* 在服务器端:模块的加载是运行时同步加载的(容易遇到阻塞)
* 在浏览器端:模块需要提前编译打包处理(CommonJS中有require,浏览器不认识所以要提前编译)
CommonJS基本语法:
* 暴露模块:
1. module.exports = value
2. exports.xxx = value
* 引入模块:require(xxx)
1. 第三方模块:xxx为模块名
2. 自定义模块:xxx为模块文件路径
CommonJS实现:
* 服务器端的实现:Node.js
* 浏览器端的实现:Browserify
我们先看commonjs基于服务端(node)的应用
(一) CommonJS基于服务端(node)的应用
1. 下载安装Node.js
......
2. 创建项目结构
/- modules
/- module1.js
/- module2.js
/- module3.js
/- app.js
/- package.json
{
"name":"commonjs_node",
"version":"1.0.0"
}
package.json也可以不用自己写,打开文件夹,在路径中输入cmd,打开命令窗口输入 npm init
package name : 不能有中文 不能大写 可以自己写 也可以用()中默认的,然后一路回车,就创建好package.json文件了.
3. 下载第三方模块
npm install uniq --save
此时package.json文件
4. 模块化编码
module1.js
module2.js
module3.js
5.在app.js中引入模块
打开命令行窗口 输入 node app.js
以上是引入自定义模块,接下来引入第三方模块,我们已经下载了第三方模块uniq
在module3.js中编写代码:
在app.js中引入
在node中运行,node app.js 结果如下:
数组已经去重并排序.但其实使用uniq排序是有问题的,[1,2,3,7,11]会被排成[1,11,2,3,7].可以试一下.
(二) CommonJS基于浏览器端(Browserify)的应用
1.创建项目结构
/-js
/-dist // 打包生成文件的目录
/-src // 源码所在的目录
/-module1.js
/-module2.js
/-module3.js
/-app.js // 应用主源文件
/-index.html
/-package.json
{
"name":"commonjs_browserify",
"version":"1.0.0"
}
2. 下载Browserify
* 全局 npm install browserify -g
* 局部 npm install browserify --save-dev (加dev 表示开发依赖 不加表示运行/生产环境依赖)
3. 编写代码
module1.js
module2.js
module3.js
app.js
4. 打包处理js
browserify js/src/app.js -o js/dist/bundle.js
// browserify就是一个命令 我们之前安装过
//-o 表示 output 输出
// js/src/app.js 是目标文件
// js/dist/bundle.js 打包完输出的文件目录和文件名
5. 页面使用引入
在浏览器中打开:
请多指教!