代码如下:
- index.html
- main.js
- mathUtil.js
<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
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环境下的。
<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。
解决方案
使用webpack编译js,转成浏览器可识别的文件。
第一步:安装webpack
npm i -g webpack webpack-cli
成功安装之后,如下图
第二步:初始化
第一次编译.js文件时,报错如下
webpack ./src/main.js ./dist/bundle.js
解决方案:npm init -y
成功执行后,目录出现package.json配置文件。
打开package.json后,在scripts节点下添加开发环境/生产环境
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
第三步:添加webpack.config.js文件
const path = require('path')
// 对外暴露一个配置对象
module.exports = {
entry: './src/main.js', // 入口:可以是字符串/数组/对象
output: {
path: path.resolve(__dirname, 'dist'), // 注意:path通常是一个绝对路径(打包好的文件存放地址)
filename: 'bundle.js' // 打包好文件的文件名称
},
mode: 'development' // 设置mode
}
第四步:执行命令
webpack ./src/main.js ./dist/bundle.js
虽然报错,但是在dist目录下仍然创建了bundle.js文件。
报错原因:第一次执行时,bundle.js不存在,webpack会直接创建该文件。
第五步:修改index.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/bundle.js"></script>
</body>
</html>
console成功打印如上。