Vue - required is not defined - webpack

代码如下：index.htmlmain.jsmathUtil.js<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"

文章共1,023字 · 阅读需要大约4分钟

一键AI生成摘要，助你高效阅读

问答

A_bad_horse

6901人浏览 · 2022-02-27 18:01:44

A_bad_horse · 2022-02-27 18:01:44 发布

代码如下：

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

成功安装之后，如下图

第二步：初始化

第一次编译.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

<!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>