Question

在我的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。因此，我只在要在其中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>文件。

END EDIT

谢谢！

Answer 1

您需要先构建捆绑软件，以使其对浏览器易于理解。错误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 {{3的更多信息}}）。这是在webpack中调用/path_to_your_project/node_modules/.bin/webpack可执行文件。如果打开该文件，则会看到它在节点中运行（以#!/usr/bin/env node开头）

现在您提到您的主文件是script.js，它“需要”其他文件。在这种情况下，您只需要在Webpack条目中放入script.js。 Webpack会自动将所需的文件捆绑在一起。所有代码都将放在一个文件中的outputPath中。（有多种方法/理由可以有多个条目，但我猜here并不是您的情况）。

因此，运行npm run webpack，npx webpack并查看输出路径（如果有一个新文件），并在标签<script>中包含文件。

Answer 2

我遇到了同样的错误，但是我没有使用Emailer oEmail = new Emailer(); oEmail.SendAlert("Message"); oEmail = null;，而是使用了webpack。 gulp将ES6转换为ES5，但是它没有遵守Babel和import语句。简而言之，gulp-bro库挽救了我的生活。您可以在此answare中找到分步说明。

Answer 3

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

Webpack：未捕获的ReferenceError：未定义require

3 个答案: