Webpack：未捕获的引用错误：未定义需求

Question

在我的PHP项目中 - 我正在尝试js使用 webpack 和 babel 构建我的文件。有 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.
        }
            }
        ],
    }
};

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

未捕获的引用错误：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. script.js所以，我只在我想要依赖文件的地方构建import/require。

起初我尝试输入所有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"
  }
}

另外，是的。js我正在标记中添加内置文件<script>。

结束编辑

提前致谢！

Answer 1

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

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

要运行 webpack，请运行npm run build（因为您build的脚本中有一个名为的脚本package.json或npx webpack（更多信息请参见npx 此处）。它的作用是调用webpack中的可执行/path_to_your_project/node_modules/.bin/webpack文件。如果您打开该文件，您将看到它在节点中运行（以 开头#!/usr/bin/env node）

现在您提到您的主文件script.js“需要”那些其他文件。在这种情况下，您只需放入script.jswebpack 条目即可。Webpack 会自动将所需的文件打包到包中。所有代码都将放在您的outputPath单个文件中。（有多种方法/理由可以有多个条目，但我猜不适合您的情况，请在此处阅读更多内容）。

因此，运行npm run webpack，npx webpack然后查看输出路径中是否有新文件并将该文件包含在<script>标记中。

Answer 2

该require功能不存在于浏览器中，仅存在于 Node 环境中。看看这个。