La conexión de archivos a través de la importación no funciona

Parece que podría ser una pérdida de un paso de compilación donde transformar el código del navegador compatible. El require el método no está disponible en el navegador.

Usted tiene que usar una herramienta que transforma el código para que se puede ejecutar en el navegador. Una de estas herramientas es Browserify, otro es acumulativo, y puede haber más. Estas herramientas, por lo general, el paquete de la dependencia de fuentes en conjunción con el código de la aplicación, que permite que requieren declaraciones de transformarse en algún otro patrón que el navegador no comprende.

Usted puede pensar en él como este (ejemplo simplificado):

El código escrito por usted

// main.js
const stringify = require('stringify')

alert(stringify({ error: "No authorization" })

La dependencia de origen en node_modules

// node_modules/stringify/index.js
function stringify(obj) {
  return JSON.stringify(obj);
}

expost.default = stringify

Paquete resultado

// dist/main.js
function stringify(obj) {
  return JSON.stringify(obj);
}

alert(stringify({ error: "No authorization" })

Gulp alberga un oficial de ejemplo de uso en su repositorio para browserify:

'use strict';

var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var log = require('gulplog');
var uglify = require('gulp-uglify');
var reactify = require('reactify');

gulp.task('javascript', function () {
  // set up the browserify instance on a task basis
  var b = browserify({
    entries: './entry.js',
    debug: true,
    // defining transforms here will avoid crashing your stream
    transform: [reactify]
  });

  return b.bundle()
    .pipe(source('app.js', { sourcemaps: true }))
    .pipe(buffer())
        // Add transformation tasks to the pipeline here.
        .pipe(uglify())
        .on('error', log.error)
    .pipe(gulp.dest('./dist/js/', { sourcemaps: '../sourcemaps/' }));
});

Trago de control de versiones: Browserify + Transforma

He intentado crear un ejemplo para usted, pero es difícil decir cuál es el más útil trago de secuencia de comandos para su proyecto. Voy a añadir un ejemplo, pero por favor, no la considero como una corrección que está listo para el uso general. Se intenta imitar el comportamiento de su actual trago script. Usted puede desear otro comportamiento en el largo plazo, por ejemplo, porque la paquetización de este script crea, no puede ser tan optimizado como otras configuraciones o herramientas permitiría.

const { dest } = require("gulp"),
  browserify = require("browserify"),
  babelify = require("babelify"),
  glob = require("glob"),
  source = require("vinyl-source-stream"),
  fileinclude = require("gulp-file-include"),
  rename = require("gulp-rename"),
  uglify = require("gulp-uglify-es").default,
  notify = require("gulp-notify"),
  browserSync = require("browser-sync").create(),
  es = require("event-stream");

const changingScripts = (done) => {
  // Define files you want to have as inputs
  var files = ["src/js/main.js", ...glob.sync("src/js/pages/**/*.js")];
  // Bundle each file separately so that file structure is preserved in
  // dist
  var tasks = files.map((file) => {
    return (
      browserify({
        entries: [file],
        debug: true,
        transform: [
          // Apply babel transforms here so that browserify knows how to bundle
          // the files
          babelify.configure({
            presets: ["@babel/preset-env"],
          }),
        ],
      })
        .bundle()
        // Transform the stream content bable bundling returns into a gulp
        // friendly format
        .pipe(source(file))
        // Not sure how fileinclude is used in your project. May be that it
        // doesn't work when it's configured in this way.
        .pipe(fileinclude())
        .pipe(dest("dist/js"))
        .pipe(
          uglify({
            toplevel: true,
          }).on("error", notify.onError())
        )
        .pipe(
          rename({
            extname: ".min.js",
          })
        )
        .pipe(dest("dist/js"))
        .pipe(browserSync.stream())
    );
  });

  return es.merge(tasks).on("end", done);
};

exports.default = changingScripts;

Gulp: Crear varios paquetes con Browserify