浏览器有时候识别es5的语法,而我们写代码时写的是es6语法,所以要打包,这样能转换成es5的代码
1.commonjs基于服务端(node)应用
结合引入第三方模块小案例
package.json中name是包名(包名不可以有中文名以及大写字母),version是版本号
如何创建package.json
首先npm init
这里可以更改包名,也可以默认,直接回车,一路敲回车
3.下载第三方模块
npm install uniq --save
4.模块化编码
目录结构如下:
module1.js
module.exports={
msg:'module1',
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('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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)