Webpack：未捕获的 ReferenceError：未定义要求答案

【问题标题】：Webpack: Uncaught ReferenceError: require is not definedWebpack：未捕获的 ReferenceError：未定义要求
【发布时间】：2018-10-01 05:10:25
【问题描述】：

在我的 PHP 项目中 - 我正在尝试使用 webpack 和 babel 构建我的 js 文件。有 3 个 js 文件 - config.js helper.js script.js。他们相互依赖。 helper.js 依赖于config.js，script.js 依赖于helper.js。

config.js:

module.exports = {
  const DG_GRAPH_TYPE = 'line';

  const DG_XAXIS_TICKS = 4;

  const DG_SINGLE_POST_GRAPH_CANVAS_HEIGHT = 250;
  ......



helper.js:

const config = require('./config');

module.exports = {
......



script.js:

const helper = require('./helper');

jQuery(document).ready(function ($) {
......

这是我使用以下代码配置的wepack.config.js 文件：

const path = require('path');

module.exports = {
    entry: {
        script: [
            './assets/js/script.js'
        ]
    },
    output: {
        filename: '[name].bundle.min.js',
        path: path.resolve(__dirname, 'build'),
    },
    resolve: {
        extensions: ['.js', '.css']
    },
    module: {
        rules: [
            {
                test: /\.js/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [require('@babel/plugin-proposal-object-rest-spread')]
                    }
                },
                parser: {
          amd: false, // disable AMD
          commonjs: false, // disable CommonJS
          system: false, // disable SystemJS
          harmony: true, // disable ES2015 Harmony import/export
          requireInclude: false, // disable require.include
          requireEnsure: false, // disable require.ensure
          requireContext: false, // disable require.context
          browserify: true, // disable special handling of Browserify bundles
          requireJs: true, // disable requirejs.*
          node: false, // disable __dirname, __filename, module, require.extensions, require.main, etc.
        }
            }
        ],
    }
};

一切正常，除非我在项目中添加构建的脚本文件，我得到以下浏览器控制台错误 -

未捕获的 ReferenceError: 未在 Object 中定义 require。 (script.bundle.min.js?ver=4.9.8:1) 在 (script.bundle.min.js?ver=4.9.8:1) 在对象。 (script.bundle.min.js?ver=4.9.8:1) 在 (script.bundle.min.js?ver=4.9.8:1) 在 script.bundle.min.js?ver=4.9.8:1 在 script.bundle.min.js?ver=4.9.8:1

我所期待的 require.js 应该可以解决问题。但事实并非如此。

您能否建议我解决问题的适当方法？

编辑

这项工作的主要概念是在一个地方构建多个 js 文件，如果我必须添加 ES6/ES7，还添加 babel 以使其浏览器友好。

我的主要js 文件是script.js，它有两个依赖项config.js 和helper.js。所以，我只在我想在那里构建import/require 依赖文件的地方构建script.js。

起初我尝试输入所有js 文件，但我得到的所有script.js 都不是其他人构建的。 -

entry: {
        script: [
            './assets/js/config.js'
            './assets/js/helper.js'
            './assets/js/script.js'
        ]
    },

这里是package.json -

{
  "name": "GRAPH",
  "version": "1.0.0",
  "description": "Graph plugin",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "ABC",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "babel-loader": "^8.0.4",
    "jquery": "^3.3.1",
    "mini-css-extract-plugin": "^0.4.3",
    "requirejs": "^2.3.6",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.9"
  }
}

另外，是的。我在<script> 标签中添加了构建的js 文件。

结束编辑

提前致谢！

【问题讨论】：

你是如何“建设”的？ .看起来您只是将脚本包含在浏览器的 <script> 标记中。 require 仅适用于 node 环境。在构建过程之后，转换后的 javascript 将被浏览器理解。如果您编辑答案以包含您正在运行的构建步骤，我可以进一步研究它。另外，您的package.json 中是否有任何脚本？
@axm__ 感谢您的评论。我更新了我的问题。
您的package.json 提到了{ build: webpack }。你真的运行npm run build 来运行命令吗？如果没有，您能否在我尝试回答问题并告诉我输出是什么之前这样做。该命令应该将构建的文件输出到您在 webpack.config.json 中提到的输出路径。阅读更多关于 npm 脚本的信息：michael-kuehnel.de/tooling/2018/03/22/…
@axm__ 是的，我使用npm run build 构建了输出js 文件。当我添加输出js 文件并将其添加到浏览器控制台中的<script> 标记时，我收到错误require is undefined。
好吧，这很奇怪。你的输出文件是什么样子的？你能看看是否有任何转换吗？

标签： javascript webpack requirejs babeljs

【解决方案1】：

您需要先构建捆绑包以使其能够被浏览器理解。错误require is not defined 提示您不在node 环境中（它不是由node runthiscurrentprogram.js 之类的东西或为您运行node 的程序调用的。使用@ 阅读有关输出格式的更多信息987654329@here

Webpack 是一个在node 中运行的捆绑器，它可以捆绑和/或转换源文件（可以是 javascript、css 等）并将它们放置在您想要的位置。捆绑文件可以包含在<script> 标记中，以便浏览器可以理解。

要运行 webpack，请运行 npm run build（因为您的 package.json 脚本中有一个名为 build 的脚本或 npx webpack（更多关于 npx here）。它的作用是调用 @987654337 @executable in /path_to_your_project/node_modules/.bin/webpack。如果你打开那个文件，你会看到它在node中运行（它以#!/usr/bin/env node开头）

现在您提到您的主文件是script.js，它“需要”那些其他文件。在这种情况下，您只需将 script.js 放入 webpack 条目中。 Webpack 会自动将所需的文件打包到包中。所有代码都将放在您的outputPath 中的单个文件中。（有多个条目的方法/原因，但我猜不是你的情况，read more here）。

所以运行 npm run webpack ， npx webpack 并查看输出路径是否有新文件，并在 <script> 标签中包含那个文件。

【讨论】：

问题是script.js文件不能需要其他两个文件。这就是为什么在console 我得到错误。那么，require 其他两个js 在script.js 内的适当方式是什么？

【解决方案2】：

require 函数不存在于浏览器中，仅存在于 Node 环境中。看看this。

【讨论】：

【解决方案3】：

我遇到了同样的错误，但我没有使用webpack，而是使用了gulp。 Babel 将 ES6 转换为 ES5，但它不符合 import 和 required 语句。简而言之，gulp-bro 图书馆拯救了我的一天。您可以在此answare 中找到分步说明。

【讨论】：