Js模块化之CommonJS

时间:2020-05-01

新建项目

在项目根目录初始化项目

npm init

新建模块js文件

m1.js

// 输出一个方法
exports.test1 = function () {
    console.log('test1');
};
// 输出一个数组
exports.arr = [1, 2, 3];

m2.js

// 输出一个对象
module.exports.obj = {
    name:"wyzda",
    test:function () {
        console.log('test');
    }
};

新建主文件

main.js

let m1 = require('./src/m1');
let m2 = require('./src/m2');
// 调用模块1的代码
m1.test1();
console.log(m1.arr);

// 调用模块2的代码
m2.obj.test();
console.log(m2.obj.name);

// 使用jquery
let $ = require('jquery');
console.log($);
$(function () {
    console.log('jquery');
    $('body').css('background','red');
});

安装browserify

npm install -g browserify

安装jquery

npm install jquery --save

编译文件

browserify ./main.js -o ./dist/build.js

新建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="dist/build.js"></script>
</body>
</html>

打开浏览器测试