javascript - Webpack:未捕获的 ReferenceError:未定义要求

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.
        }
            }
        ],
    }
};

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

Uncaught ReferenceError: require is not defined at Object. (script.bundle.min.js?ver=4.9.8:1) at a (script.bundle.min.js?ver=4.9.8:1) at Object. (script.bundle.min.js?ver=4.9.8:1) at a (script.bundle.min.js?ver=4.9.8:1) at script.bundle.min.js?ver=4.9.8:1 at 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不是别人 build 的。 -

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

您需要先构建 bundle ，使其能够被浏览器理解。错误 require is not defined提示您不在 node 中环境(它不是由 node runthiscurrentprogram.js 或为您运行 node 的程序调用的。使用 require here 阅读更多关于输出格式的信息

Webpack是在 node 中运行的打包器可以捆绑和/或转换源文件(可以是 javascript、css 等)并将它们放在你想要的地方。捆绑文件可以包含在 <script> 中标记以使其能够被浏览器理解。

运行 webpack 或者运行 npm run build (因为您的 build 脚本或 package.json 中有一个名为 npx webpack 的脚本(更多关于 npx here )。这样做是调用 webpack 中的可执行文件 /path_to_your_project/node_modules/.bin/webpack 。如果您打开它文件，你会看到它在节点中运行(它以 #!/usr/bin/env node 开头)

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

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