Collegamento di file tramite importazione non funziona

Sembra che si potrebbe essere perso un passaggio di generazione, dove puoi trasformare il tuo codice, browser compatibili. Il require il metodo non è disponibile nel browser.

È necessario utilizzare uno strumento che trasforma il codice in modo che possa essere eseguito nel browser. Uno di questi strumenti è Browserify, un altro è cumulativo, e ci può essere di più. Questi strumenti, in generale, un pacchetto di dipendenza fonti in collaborazione con il codice dell'applicazione, che consente di richiedere dichiarazioni a essere trasformati in qualcosa d'altro modello il browser non capire.

Si può pensare ad esso come questo (esempio semplificato):

Il codice scritto da te

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

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

Dipendenza di origine in node_modules

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

expost.default = stringify

Bundle risultato

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

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

Gulp ospita un funzionario esempio di utilizzo in archivio per 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 di controllo di Versione: Browserify + Trasforma

Ho tentato di creare un esempio per voi, ma è difficile dire che cosa è più utilizzabile gulp script sarebbe per il vostro progetto. Aggiungo un esempio, ma vi prego di non considerarla come una correzione che è pronto per l'uso generale. Tenta di imitare il comportamento corrente gulp script. Si potrebbe desiderare di altri comportamenti, nel lungo periodo, per esempio, perché l'accorpamento questo script crea non può essere ottimizzato e altre configurazioni o utensili permetterebbe.

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: la Creazione di diversi bundle con Browserify