Блог

Итак, я новичок в разработке js. То, что я пытаюсь сделать, это настроить базовую среду для изучения и быть своего рода начальной загрузкой, с задачами gulp и так далее.

Я застрял в этой ошибке, вызванной в терминале:

 ReferenceError: require is not defined
at file:///Users/henriquegodinho/Google Drive/Elucidário.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:

 $ npm -v
6.14.8
  

версия gulp:

 $ 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"
    }
}
  

Что я делаю не так?

похоже, у вас нет скрипта запуска gulp в вашем package.json также вы хотите удалить «type»: «module» из package.json, что вызывает проблему с 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"
}
  

}

также переименуйте ваш файл gulp в

gulpfile.babel.js