Pripojenie súborov cez import nefunguje

Zdá sa, ako by ste mohli byť chýbajúce stavať krok, kde môžete premeniť váš kód bude prehliadač kompatibilný. Na require metóda nie je k dispozícii v prehliadači.

Budete musieť použiť nástroj, ktorý transformuje váš kód tak, že to môže byť bežal v prehliadači. Jeden takýto nástroj je Browserify, iný je rollup, a tam môže byť viac. Tieto nástroje, všeobecne povedané, zväzok závislosť zdrojov v spojení s kódu aplikácie, ktorá umožňuje vyžadovať závierka byť premenená na niektoré iné vzor prehliadač má pochopiť.

Môžete myslieť na to, ako je tento (príklad je zjednodušený):

Kód napísal vás

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

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

Závislosť zdroj v node_modules

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

expost.default = stringify

Zväzok výsledok

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

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

Dúškom hostitelia úradník príklad použitia v ich úložiska pre 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/' }));
});

Dúškom Verzií: Browserify + Transformuje

Som sa pokúšal vytvoriť príklad pre vás, ale je to ťažké povedať, čo najviac použiteľné dúškom skript by byť pre váš projekt. Som si pridajte príklad, ale prosím, nepovažujem to za opravu, ktorý je pripravený pre všeobecné použitie. Pokúša sa napodobňovať správanie vašej aktuálnej dúškom skript má. Možno budete chcieť iné správanie sa v dlhodobom horizonte, napríklad preto, viazanie tento skript vytvorí nemusí byť optimalizované tak, ako ostatné konfigurácie alebo nástroje, ktoré by umožnili.

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;

Dúškom: Vytvorenie viacerých zväzkov s Browserify