Блог

Мой процесс сборки Javascript заканчивается вставкой ключевого слова require() в файл. Это не поддерживается на стороне клиента и вызывает ошибку консоли. Я добавил browserify для других ответов SO, однако, в свою очередь, получаю другую ошибку (ниже).

Дополнительная информация:

Я использую:

1. Глоток 4
2. Узел (версия 14.2.0)

Ошибка:

 [16:03:55] Using gulpfile /mnt/c/code/mutationObserver/gulpfile.js
[16:03:55] Starting 'default'...
[16:03:55] Starting 'clean'...
[16:03:55] Finished 'clean' after 10 ms
[16:03:55] Starting 'html'...
[16:03:55] Starting 'js'...
[16:03:55] Starting 'css'...
[16:03:55] Finished 'html' after 46 ms
[16:03:55] Finished 'css' after 51 ms
[16:03:55] 'js' errored after 54 ms
[16:03:55] Error: Can't walk dependency graph: Cannot find module '/mnt/c/code/mutationObserver/src/js/*.js' from '/mnt/c/code/mutationObserver/src/js/_fake.js'
    required by /mnt/c/code/mutationObserver/src/js/_fake.js
    at /mnt/c/code/mutationObserver/node_modules/resolve/lib/async.js:136:35
    at load (/mnt/c/code/mutationObserver/node_modules/resolve/lib/async.js:155:43)
    at onex (/mnt/c/code/mutationObserver/node_modules/resolve/lib/async.js:180:17)
    at /mnt/c/code/mutationObserver/node_modules/resolve/lib/async.js:15:69
    at FSReqCallback.oncomplete (fs.js:175:21)
[16:03:55] 'default' errored after 69 ms
  

Весь мой Gulpfile.js заключается в следующем:

 const { series, parallel, watch, src, dest } = require("gulp");
const plumber = require("gulp-plumber");
const del = require("del");
const concat = require("gulp-concat");
const babel = require("gulp-babel");
const sass = require("gulp-sass");
const browserSync = require("browser-sync").create();
const browserify = require('browserify')
const source = require('vinyl-source-stream')


function html() {
  return src("./src/*.html").pipe(dest("./dist"));
}

function css() {
  return src("./src/css/style.scss")
    .pipe(plumber())
    .pipe(sass().on("error", sass.logError))
    .pipe(dest("./dist/css"));
}

function js() {
  return browserify("./src/js/*.js")
    .bundle()
    .pipe(source("main.js"))
    .pipe(plumber())
    .pipe(
      babel({
        presets: ["@babel/env"],
        plugins: ["@babel/transform-runtime"],
      })
    )
    .pipe(dest("./dist/js"));
}

function clean() {
  return del(["./dist"]);
}

function watchFor() {
  browserSync.init({
    server: {
      baseDir: "./dist/",
    },
  });

  // first rerun the function that distributed the css files, then reload the browser
  watch("./src/css/**/*.scss").on("change", css);
  watch("./dist/css/*.css").on("change", browserSync.reload);

  // first rerun the function that distributed the javascript files, then reload the browser
  watch("./src/js/*.js").on("change", js);
  watch("./dist/js/*.js").on("change", browserSync.reload);

  // first rerun the function that writes to the dist folder, then reload the browser
  watch("./src/*.html").on("change", html);
  watch("./dist/*.html").on("change", browserSync.reload);
}

exports.clean = clean;
exports.css = css;
exports.js = js;
exports.html = html;
exports.watch = watch;
exports.default = series(clean, parallel(html, js, css), watchFor);

  

У меня была та же ошибка. Эта ошибка означает, что не удается найти требуемый js-файл. Убедитесь, что файл находится в правильной папке, как указано в «требуется», и если он находится в той же папке, возможно, потребуется добавить ./ .

browserify main.js -o bundle.js

 Error: Can't walk dependency graph: Cannot find module 'srt' from 'C:codehtml1main.js'
  

В моем main.js ошибка, я изменил:

 var srt = require('srt');
  

Для:

 var srt = require('./srt');
  

И тогда это сработало.

Мой случай был немного другим. Я только что перешел с Windows на Ubuntu (через WSL).

Дважды проверил, установлен ли пакет, удален и переустановлен локально и глобально, по-прежнему не удается найти module.

Ранее это работало в Windows:

window.Example = require('Example');

Оказывается, чувствительность к регистру в Linux означала, что это должно быть:

window.Example = require('example');