La connexion des fichiers via l'importation ne fonctionne pas

Il semble que vous pourriez manquer une étape de génération où vous transformez votre code afin d'être compatible avec les navigateurs. L' require la méthode n'est pas disponible dans le navigateur.

Vous devez utiliser un outil qui transforme votre code, de sorte qu'il peut être exécuté dans le navigateur. Un tel outil est Browserify, un autre est cumulatif, et il peut y en avoir plus. Ces outils, d'une manière générale, le bundle de la dépendance des sources en collaboration avec le code de votre application, ce qui permet d'exiger des déclarations d'être transformé en un autre motif que le navigateur ne comprend pas.

Vous pouvez y penser comme ceci (exemple simplifié):

Le Code écrit par vous

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

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

La dépendance de la source dans node_modules

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

expost.default = stringify

Bundle résultat

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

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

Gulp hôtes un fonctionnaire exemple d'utilisation dans leur référentiel de 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/' }));
});

Gorgée de contrôle de Version: Browserify + Transforme

J'ai essayé de créer pour vous un exemple, mais il est difficile de dire quel est le plus utilisable gulp script pour votre projet. Je vais ajouter un exemple, mais s'il vous plaît ne pas le considérer comme un correctif qui est prêt pour une utilisation générale. Il tente d'imiter le comportement actuel de votre gulp script. Vous souhaitez peut-être d'autres comportements à long terme, par exemple parce que le regroupement de ce script crée peut-être pas aussi optimisé que d'autres configurations d'outillage ou le permettrait.

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: Création de plusieurs faisceaux avec Browserify