CommonJS 浏览器端模块化教程
###1. 创建项目结构
|-js
|-dist //生成编译完js的目录
|-src //源码所在的目录(我们编写的、没经过工具处理的代码,叫做源码)
|-module1.js
|-module2.js
|-module3.js
|-main.js
|-index.html
###2. 模块化编码
-
module1.js
module.exports = { foo() { console.log('moudle1 foo()') } }
-
module2.js
module.exports = function () { console.log('module2()') }
-
module3.js
exports.foo = function () { console.log('module3 foo()') } exports.bar = function () { console.log('module3 bar()') }
-
下载第三方模块uniq:打开左下角的Terminal,cd到03_CommonJS-Browserify路径,输入命令:
npm install uniq --save
-
main.js
//引用模块 let module1 = require('./module1') let module2 = require('./module2') let module3 = require('./module3') let uniq = require('uniq') //使用模块 module1.foo() module2() module3.foo() module3.bar() console.log(uniq([1, 3, 1, 4, 3]))
3. 下载 browserify
- 全局安装browserify,命令:
npm install browserify -g
备注:若此步骤报错,请使用管理员身份打开webstorm,再次执行即可;或使用管理员身份打开cmd执行。
4. 执行处理命令
- 第一步,cd到指定文件夹(03_CommonJS-Browserify)即:app.js所在的文件夹
- 第二步,输入命令
browserify js/src/main.js -o js/dist/bundle.js
5. 页面使用引入:
<script type="text/javascript" src="js/dist/bundle.js"></script>