Vue - required is not defined - webpack_html

代码如下:

  • 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

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。

解决方案

使用webpack编译js,转成浏览器可识别的文件。


第一步:安装webpack

npm i -g webpack webpack-cli

成功安装之后,如下图

Vue - required is not defined - webpack_vue.js_02

 第二步:初始化

第一次编译.js文件时,报错如下

webpack ./src/main.js ./dist/bundle.js

Vue - required is not defined - webpack_javascript_03

 解决方案:npm init -y

成功执行后,目录出现package.json配置文件。

Vue - required is not defined - webpack_webpack_04

 打开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

Vue - required is not defined - webpack_html_05

虽然报错,但是在dist目录下仍然创建了bundle.js文件。

报错原因:第一次执行时,bundle.js不存在,webpack会直接创建该文件。

第五步:修改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/bundle.js"></script>
</body>
</html>

Vue - required is not defined - webpack_javascript_06

console成功打印如上。