浏览器有时候识别es5的语法，而我们写代码时写的是es6语法，所以要打包,这样能转换成es5的代码
1.commonjs基于服务端(node)应用
结合引入第三方模块小案例
package.json中name是包名(包名不可以有中文名以及大写字母)，version是版本号
如何创建package.json
首先npm init
这里可以更改包名，也可以默认，直接回车，一路敲回车
3.下载第三方模块
npm install uniq --save
4.模块化编码
目录结构如下：
module1.js
// module.exports=value 暴露一个对象
module.exports={
msg:'module1',
fn:function(){
console.log('module1');
}
}
module2.js
//暴露一个函数module.exports=function(){}
module.exports=function(){
console.log("module2");
}
//这里不能再写module.exports暴露了，不然会覆盖上面暴露的
module3.js
//exports.xxx=value
exports.foo=function(){
console.log('module3');
}
exports.bar=function(){
console.log('bar module3');
}
exports.arr=[1,2,3,5,5,4,4,7,2,11]
app.js
//当引入第三方库时要放在自定义库前面
let uniq=require('uniq')
//将其他的模块汇集到主模块
let module1 = require("./modules/module1.js");
let module2 = require("./modules/module2.js");
let module3 = require("./modules/module3.js");
module1.fn()
module2()
module3.foo()
module3.bar()
console.log(uniq(module3.arr));
2.commonjs基于浏览器端应用
创建好js文件和html文件后，npm init创建package.json
然后全局和局部都要下载broserify
下载之后编写代码后，在index.html中引入app.js
打包处理js
这时候dist中会有
在之前的Index.html中将引入的app.js改为打包好的文件bundle.js，这样就能在浏览器中运行了
目录结构如下图：
module1.js
module.exports={
msg:'www',
fn:function(){
console.log('module1');
}
}
module2.js
module.exports=function(){
console.log('module2');
}
module3.js
exports.foo=function(){
console.log('module3');
}
exports.bar=function(){
console.log("module3 bar");
}
app.js
let module1=require('./module1.js')
let module2=require('./module2.js')
let module3 = require("./module3.js");
module1.fn()
module2()
module3.foo()
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./js/dist/bundle.js"></script>
</body>
</html>
1193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
