जोड़ने फ़ाइलों के माध्यम से आयात काम नहीं करता है

ऐसा लगता है जैसे तुम लापता हो सकता है एक निर्माण कदम है जहाँ आप को बदलने के लिए अपने कोड हो सकता है ब्राउज़र संगत है । के require विधि में उपलब्ध नहीं है ब्राउज़र.

आप का उपयोग करने के लिए एक उपकरण में बदल देती है, जो अपने कोड इतना है कि यह किया जा सकता ब्राउज़र में भाग गया. इस तरह के एक उपकरण है Browserify, एक और है रोलअप, और वहाँ और अधिक हो सकता है. इन उपकरणों को आम तौर पर बोल, बंडल निर्भरता स्रोतों के साथ संयोजन के रूप में अपने आवेदन कोड है, जो की अनुमति देता है की आवश्यकता होती बयान में तब्दील किया जा सकता कुछ अन्य पैटर्न ब्राउज़र करता है समझते हैं ।

आप कर सकते हैं लगता है कि यह की इस तरह (उदाहरण सरलीकृत):

लिखा कोड के द्वारा आप

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

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

निर्भरता स्रोत में node_modules

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

expost.default = stringify

बंडल परिणाम

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

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

घूंट मेजबान एक आधिकारिक उदाहरण के उपयोग में अपने भंडार के लिए 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/' }));
});

घूंट संस्करण नियंत्रण: Browserify + बदल देती है

मैं कोशिश करने के लिए बनाने के लिए एक उदाहरण के लिए आप, लेकिन यह मुश्किल क्या कहने के लिए सबसे अधिक प्रयोग करने योग्य घूंट स्क्रिप्ट के लिए किया जाएगा अपनी परियोजना के लिए. मैं जोड़ देंगे एक उदाहरण है, लेकिन कृपया नहीं है, के रूप में यह विचार एक तय तैयार है कि सामान्य उपयोग के लिए. यह प्रयास करने के लिए की नकल व्यवहार के अपने मौजूदा घूंट स्क्रिप्ट है. तुम चाहते हो सकता है अन्य व्यवहार लंबे समय में, उदाहरण के लिए, क्योंकि bundling इस स्क्रिप्ट बनाता है नहीं हो सकता है के रूप में अनुकूलित के रूप में अन्य विन्यास या टूलींग की अनुमति होगी.

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;

घूंट: बनाने के लिए कई बंडलों के साथ Browserify