Připojení souborů přes import nefunguje

Zdá se, jako byste mohli být chybí budovat krok, kde si proměnit váš kód být kompatibilní se všemi prohlížeči. Na require metoda není k dispozici v prohlížeči.

Musíte použít nástroj, který promění váš kód tak, že to může být běžel v prohlížeči. Jeden takový nástroj je Browserify, další je kumulativní, a tam může být více. Tyto nástroje, obecně řečeno, svazek závislost zdrojů ve spojení s vaše aplikace kód, který umožňuje vyžadovat prohlášení, které mají být transformovány do nějaký jiný vzor prohlížeče nerozumí.

Můžete si ji takto (příklad je zjednodušený):

Kód jste napsal

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

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

Závislost zdroj v node_modules

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

expost.default = stringify

Svazek výsledek

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

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

Gulp hostí oficiální příklad použití v jejich úložiště pro 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/' }));
});

Gulp Verze ovládání: Browserify + Transformuje

Pokusil jsem se vytvořit příklad pro vás, ale je těžké říci, co nejvíce použitelné douškem scénář by pro váš projekt. Přidám příklad, ale prosím, neberte to jako opravu, která je připravena pro všeobecné použití. To se snaží napodobit chování své aktuální douškem skript má. Možná budete chtít jiné chování v dlouhodobém horizontu, například kvůli tomu, svazování tento skript vytvoří nemusí být tak optimalizované jako další konfigurace nebo nástroje by umožnilo.

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;

Lok: Vytváření více svazků s Browserify