Połączenie plików za pomocą importu nie działa

Wygląda na to, możesz pominąć etap montażu, na którym przekształcisz swój kod, aby był on kompatybilny z przeglądarką. To require metoda nie jest dostępny w przeglądarce.

Należy wykorzystać narzędzie, które konwertuje kod tak, aby można go było uruchomić w przeglądarce. Jednym z takich narzędzi jest Browserify, inni-pakiet, i może ich być więcej. Narzędzia te, ogólnie rzecz biorąc, łączą źródła uzależnień w połączeniu z kodem aplikacji, co pozwala na konwersję operatorzy require w jakiś inny szablon, intuicyjny przeglądarki.

Można myśleć o tym w ten sposób (przykład uproszczony):

Kod napisany przez ciebie

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

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

Źródło uzależnień w node_modules

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

expost.default = stringify

Wynik rozwarstwienia

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

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

Gulp umieszcza oficjalna przykład użycia w swoim repozytorium dla 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/' }));
});

Kontrola wersji Gulp: Browserify + Konwersji

Próbowałem utworzyć przykład dla ciebie, ale trudno powiedzieć, jaki scenariusz gulp będzie najbardziej odpowiedni dla twojego projektu. Dodam przykład, ale, proszę, nie traktujcie go jako poprawka, gotowe do użytku ogólnego. On stara się naśladować zachowanie bieżącego skryptu gulp. W dłuższej perspektywie może być konieczne inne zachowanie, na przykład, bo zabudowa, tworzona za pomocą tego skryptu, nie może być tak zoptymalizowany, jak pozwalają na to inne konfiguracje lub narzędzia.

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: Tworzenie wielu pakietów za pomocą Browserify