1. 创建项目结构
|-js
|-dist //生成打包文件的目录
|-src //源码所在的目录（我们编写的、没经过工具处理的代码，叫做源码）
|-module1.js
|-module2.js
|-module3.js
|-app.js
|-index.html
|-package.json
{
"name": "test",
"version": "1.0.0"
}
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：
npm install uniq --save
-
app.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(用于把CommonJS的模块化语法，翻译成浏览器认识的语法，一个“翻译官”)
-
第一步，执行全局安装命令:
npm install browserify -g（若此步骤报错，请使用管理员身份打开webstorm，再次执行即可） -
第二步，执行局部安装命令:
npm install browserify --save-dev -
备注：以上两步骤都要执行，缺一不可！
4. 执行处理命令
* 第一步，cd到指定文件夹
* 第二步，输入命令browserify js/src/app.js -o js/dist/bundle.js
5. 页面使用引入:
<script type="text/javascript" src="js/dist/bundle.js"></script>
