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沒有定義的錯。