Conectarea fișiere prin import nu funcționează

Se pare ca ai putea pierde o construi pas în cazul în care transforma codul pentru a fi compatibil cu browser-ul. La require metoda nu este disponibilă în browser-ul.

Trebuie să utilizați un instrument care transformă codul dvs., astfel încât acesta poate fi rulat în browser-ul. Un astfel de instrument este Browserify, altul este rollup, și nu poate fi mai. Aceste instrumente, în general vorbind, pachet de dependență surse în legătură cu cererea dumneavoastră de cod, care permite necesită declarații să fie transformat într-un alt model, browser-ul nu înțelege.

Vă puteți gândi la ea ca acest lucru (exemplu simplificat):

Codul scris de tine

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

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

Dependența de sursa din node_modules

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

expost.default = stringify

Pachet rezultatul

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

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

Înghițitură găzduiește un oficial exemplu de utilizare a lor în depozit pentru 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/' }));
});

Înghițitură de control Versiune: Browserify + Transformă

Am încercat să creeze un exemplu pentru tine, dar e greu de spus care e cea mai utila înghițitură script-ul ar fi pentru proiectul dumneavoastră. Voi adăuga un exemplu, dar vă rugăm să nu ia în considerare ca un fix, care este gata pentru utilizare generală. Ea încearcă să imite comportamentul tău actual înghițitură script are. Poate vrei alt comportament pe termen lung, de exemplu, deoarece gruparea acest script creează nu poate fi la fel de optimizat ca alte configurații sau scule-ar permite.

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: Crearea mai multor pachete cu Browserify