代码如下:
- index.html
- main.js
- mathUtil.js
<!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="./src/main.js"></script>
</body>
</html>
main.js 引用mathUtil.js
main.js
const {add, mul} = require('./mathUtils.js')
console.log(add(10, 10));
console.log(mul(10, 30));
mathUtil.js
function add(num1, num2) {
return num1 + num2;
}
function mul(num1, num2) {
return num1 * num2;
}
module.exports = {
add,
mul
}
浏览器打开index.html时,报错:“Uncaught ReferenceError: require is not defined”
原因:浏览器无法识别require关键字。require是node.js环境下的。
<!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>
this === window ? console.log('browser') : console.log('node');
/*
判断global对象是否为window,
为window在浏览器中运行
不为window在node环境中运行
*/
</script>
</body>
</html>
打印结果为brower,可知运行环境是browser。
解决方案
使用browserify编译js,转成浏览器可识别的文件。
第一步:npm i -g browserify
第二步:set-ExecutionPolicy RemoteSigned
第三步:browserify main.js -o dist.js
-o 表示打包后的输出文件。
dist.js内容如下
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
const {add, mul} = require('./mathUtils.js')
console.log(add(10, 10));
console.log(mul(10, 30));
},{"./mathUtils.js":2}],2:[function(require,module,exports){
function add(num1, num2) {
return num1 + num2;
}
function mul(num1, num2) {
return num1 * num2;
}
module.exports = {
add,
mul
}
},{}]},{},[1]);
修改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="./dist/dist.js"></script>
</body>
</html>