연결을 통해 파일을 가져오지 않 작업

그것은 당신처럼 보인다 누락 될 수 있습니다.를 구축 단계에서는 변환 코드를 브라우저 호환됩니다. 이 require 방법은 사용하지 않에서 사용할 수 있는 브라우저입니다.

당신은 도구를 사용하여 변환하는 코드는 실행할 수 있습니다. 이러한 도구 중 하나입니다 Browserify,또는 롤업,그리고 더있을 수 있습니다. 이러한 도구는,일반적으로 말해서,번들의 종속성을 소스에서 함께 응용 프로그램 코드,수요 문의 것으로 변형이 일부 다른 패턴 브라우저가 이해합니다.

당신처럼 생각할 수 있습니다(예 simplified):

코드에 의해 작성된 당신

// 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+환

나는 시도를 만들 예를 들어,당신을 위해 그러나 그것은 어려운 무슨 말을 쓸모 있는 꿀꺽 스크립트는 것에 대한 귀하의 프로젝트입니다. 추가 예를 들어,하지만 제발 고려하지 않으로 해결을 위해 준비된 일반적으로 사용합니다. 그것을 모방하려고 시도하는 행동의 현재 삼 스크립트가있다. 할 수 있는 다른 행동에 대한 인스턴스 때문에 번들 이 스크립트를 생성하지 않을 수 있습으로 최적화 기타 구성하거나 장식새김합니다.

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