ReferenceError: gulpfile.js没有定义要求

Question

所以，我对js的开发很陌生。我想要做的是建立一个学习的基本环境，成为一个自我引导的人，承担大量的任务等等。

我陷入了终端中抛出的错误：

ReferenceError: require is not defined
at file:///Users/henriquegodinho/Google%20Drive/Elucid%C3%A1rio.art/plugin/elucidario/gulpfile.js:12:12
at ModuleJob.run (internal/modules/esm/module_job.js:146:23)
at async Loader.import (internal/modules/esm/loader.js:165:24)

我在来这里之前做了功课，试着自己调试和搜索一个答案，但是所有的搜索结果都是为客户端实现的，但是我在终端上这样做--这不是服务器端吗？

节点版本：

$ node -v
v14.13.0

国家预防机制版本：

$ npm -v
6.14.8

吞咽版：

$ gulp -v
CLI version: 2.3.0
Local version: 4.0.2

问题是当我跑的时候：

$ npm run gulp

gulpfile.json

// Gulp.js configuration
'use strict';
const

    // source and build folders
    dir = {
        src: 'src/',
        build: 'dist/'
    },

    // Gulp and plugins
    gulp = require('gulp'),
    gutil = require('gulp-util'),
    newer = require('gulp-newer'),
    imagemin = require('gulp-imagemin'),
    sass = require('gulp-sass'),
    postcss = require('gulp-postcss'),
    deporder = require('gulp-deporder'),
    concat = require('gulp-concat'),
    stripdebug = require('gulp-strip-debug'),
    uglify = require('gulp-uglify');

// Browser-sync
var browsersync = false;
// PHP settings

const php = {
    src: dir.src + 'php/**/*.php',
    build: dir.build
};
// copy PHP files
gulp.task('php', () => {
    return gulp.src(php.src)
        .pipe(newer(php.build))
        .pipe(gulp.dest(php.build));
});

package.json

{
    "name": "elucidario",
    "version": "0.1.0",
    "description": "",
    "main": "index.js",
    "type": "module",
    "scripts": {
        "wp-env": "wp-env"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.11.6",
        "@babel/preset-env": "^7.11.5",
        "@babel/register": "^7.11.5",
        "@wordpress/env": "^2.0.1",
        "autoprefixer": "^10.0.1",
        "browser-sync": "^2.26.12",
        "css-mqpacker": "^7.0.0",
        "cssnano": "^4.1.10",
        "gulp": "^4.0.2",
        "gulp-clean-css": "^4.3.0",
        "gulp-concat": "^2.6.1",
        "gulp-deporder": "^1.2.0",
        "gulp-if": "^3.0.0",
        "gulp-imagemin": "^7.1.0",
        "gulp-newer": "^1.4.0",
        "gulp-postcss": "^9.0.0",
        "gulp-sass": "^4.1.0",
        "gulp-strip-debug": "^3.0.0",
        "gulp-uglify": "^3.0.2",
        "gulp-util": "^3.0.8",
        "postcss-assets": "^5.0.0",
        "yarg": "^1.0.8"
    },
    "dependencies": {
        "esm": "^3.2.25"
    }
}

我做错了什么？

Answer 1

您的package.json中似乎没有一个完整的运行脚本，您还希望从package.json中删除"type"：“模块”，这会导致require/esm出现问题。

这是我对你的package.json文件的编辑

{
"name": "elucidario",
"version": "0.1.0",
"description": "",
"main": "index.js",
"scripts": {
    "wp-env": "wp-env",
    "gulp": "node ./node_modules/gulp/bin/gulp.js php"
},
"author": "",
"license": "ISC",
"devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@babel/register": "^7.11.5",
    "@wordpress/env": "^2.0.1",
    "autoprefixer": "^10.0.1",
    "browser-sync": "^2.26.12",
    "css-mqpacker": "^7.0.0",
    "cssnano": "^4.1.10",
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-deporder": "^1.2.0",
    "gulp-if": "^3.0.0",
    "gulp-imagemin": "^7.1.0",
    "gulp-newer": "^1.4.0",
    "gulp-postcss": "^9.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-strip-debug": "^3.0.0",
    "gulp-uglify": "^3.0.2",
    "gulp-util": "^3.0.8",
    "postcss-assets": "^5.0.0",
    "yarg": "^1.0.8"
},
"dependencies": {
    "esm": "^3.2.25",
    "gulp-babel": "^8.0.0"
}

}

还将您的吞咽文件重命名为

gulpfile.babel.js