Dosyaları içe aktarma yoluyla bağlama çalışmıyor

Kodunuzu tarayıcı uyumlu olacak şekilde dönüştürdüğünüz bir oluşturma adımını kaçırıyor olabilirsiniz. Bu require yöntem tarayıcıda kullanılamaz.

Kodunuzu tarayıcıda çalıştırılabilmesi için dönüştüren bir araç kullanmanız gerekir. Böyle bir araç Browserify, diğeri rollup ve daha fazlası olabilir. Bu araçlar, genel olarak konuşursak, bağımlılık kaynaklarını uygulama kodunuzla birlikte paketleyerek require ifadelerinin tarayıcının anladığı başka bir kalıba dönüştürülmesini sağlar.

Bunu şöyle düşünebilirsiniz (örnek basitleştirilmiştir):

Sizin tarafınızdan yazılan kod

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

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

Node_modules'da bağımlılık kaynağı

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

expost.default = stringify

Paket sonucu

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

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

Gulp, browserify için depolarında resmi bir kullanım örneği barındırıyor:

'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 Sürüm kontrolü: Browserify + Dönüşümleri

Sizin için bir örnek oluşturmaya çalıştım, ancak projeniz için en kullanışlı gulp betiğinin ne olacağını söylemek zor. Bir örnek ekleyeceğim, ancak lütfen bunu genel kullanıma hazır bir düzeltme olarak düşünmeyin. Mevcut gulp senaryonuzun sahip olduğu davranışı taklit etmeye çalışır. Örneğin, uzun vadede başka davranışlar isteyebilirsiniz, çünkü bu komut dosyasının oluşturduğu paket, diğer yapılandırmaların veya takımların izin vereceği kadar optimize edilmemiş olabilir.

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: Browserify ile birden çok paket oluşturma