การเชื่อมต่อแฟ้มผ่านทางนำเข้าไม่ได้ทำงาน

มันดูเหมือนว่าคุณอาจจะหายไปสร้างขั้นตอนที่คุณเปลี่ยนรหัสของคุณจะเป็นเบราว์เซอร์น่ะไร้เดียงสาและไม่เสแสร้งด้วย คน require วิธีการมันยังไม่มีอยู่ในเบราว์เซอร์

คุณต้องใช้เครื่องมือซึ่ง transforms ของคุณรหัสดังนั้นมันจะวิ่งในเบราว์เซอร์ หนึ่งเช่นเครื่องมือคือ Browserifyอีกเป็น rollup และมันอาจจะมากกว่านั้น พวกเครื่องมือโดยปกติการพูดสวมเสื้อกันหนาวได้การขึ้นแก่กันแหล่งข่าวใน the grammatical type of a word กับโปรแกรมของคุณรหัสซึ่งจะอนุญาตให้ต้องการให้สอบสวนจะเปลี่ยนไปในบางอย่างอื่นรูปแบบเบราว์เซอร์ยังเข้าใจเลย

คุณสามารถคิดว่ามันเหมือนนี้(ตัวอย่างเป็นประยุกต์@item text character set):

รหัสเขียนโดยคุณ

// 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" })

Gulp เครื่องปลายทางเป็นทางการตัวอย่างของการใช้ในพวกเขาเก็บสำหรับ 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 เวอร์ชั่นคอน:Browserify+Transforms

ฉันพยายามสร้างเป็นตัวอย่างสำหรับคุณแต่มันก็ยากที่จะบอกอะไรมากที่สุดภัย gulp สคริปต์จะเป็นของคุณสำหรับโครงการ ฉันจะเพิ่มเป็นตัวอย่างแต่ได้โปรดอย่าคิดว่ามันเป็นการแก้ไขมันพร้อมสำหรับท่านนายพลประโยชน์หรอก มันพยายาม mimic งพฤติกรรมของคุณปัจจุบัน gulp สคริปต์ได้ คุณอาจจะต้องการพฤติกรรมอื่นไม่นานนักหรอกสำหรับตัวอย่างเช่เพราะว่า bundling นี้สร้างสคริปต์อาจจะไม่ได้ถูกปรับมาให้เหมาะที่อื่น configurations หรือ tooling จะอนุญาต.

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:กำลังสร้างหลาย bundles กับ Browserify