1.前端html中想要使用require导入模块，就要引入requirejs，那么首先使用script引入requirejs。
<!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"> <script src="https://requirejs.org/docs/release/2.3.6/r.js"></script> <title>require的使用</title> </head> <body> </body> </html>
2.写一个example.js文件、c.js文件。
example.js
define([‘example‘], function (require) { var message = "Hello!"; //共享方法 function aa(num1, num2) { console.log("被共享的方法哦~"); console.log(num1 + num2); } return { message: message, bb: aa }; });
c.js
define(function (require, exports, module) { module.exports = function () { console.log("hello world") } });
3.script标签type="module"，导入模块。
<script type="module"> // 使用require导入example.js c.js require(["example",‘c‘], function() { var example = require("example"); var c = require("c"); console.log(example.message); example.bb(2,7); c(); }); </script>
4.全局安装live-server，使用live-server启动html文件。
5.浏览器打开index.html后，F12查看控制台的输出。
总结：
live-server：全局安装npm i -g live-server后，项目目录使用live-server命令行命令便可直接在浏览器中预览（默认找index.html，其他请自行带上文件名空格后跟在后面），并且自动全局监听实时更新。
module.exports：主要用于nodejs后端，如果在一个js文件中直接使用，然后终端运行：node 文件名，就不会报require没有定义的错。