Nano Hash - криптовалюты, майнинг, программирование

как использовать исключение в браузере?

в руководстве по браузеру, exclude part, приводится пример использования исключать:

$ npm install jquery
$ browserify -r jquery --standalone jquery > jquery-bundle.js

тогда мы хотим просто потребовать('jquery') в main.js:

var $ = require('jquery');
$(window).click(function () { document.body.bgColor = 'red' });

полагаясь на пакет jquery dist, чтобы мы могли написать:

<script src="jquery-bundle.js"></script>
<script src="bundle.js"></script>

и не отображать определение jquery в bundle.js, тогда при компиляции main.js вы можете --exclude jquery:

browserify main.js --exclude jquery > bundle.js

но когда я пытаюсь запустить этот образец, я получаю сообщение об ошибке "Неперехваченная ошибка: не удается найти модуль 'jquery'"

я знаю, что если я использую автономную версию, я могу просто использовать 'jquery' как глобальную переменную, но она не модульная, поэтому я все еще хочу использовать образец, используя "require('jquery')", Итак, что я должен сделать, чтобы достичь этого?

15.12.2015

Ответы:


1

Наконец-то я получил эту функциональность, используя информацию, найденную здесь:

https://truongtx.me/2014/03/20/browserify-bring-nodejs-modules-to-browser/

Интересно, документы, которые вы нашли, устарели сейчас...

В рабочем решении по приведенной выше ссылке используется параметр "-x" ("внешний"), а не параметр "-u" ("исключить")

Связанная статья также демонстрирует, как настроить это с помощью gulp.

Я вставляю соответствующий контент с указанного выше веб-сайта:

$ browserify -r foo.js > foo-out.js
$ browserify -r d3-browserify > d3-browserify-out.js

Для main.js

$ browserify -x ./foo.js -x d3-browserify main.js > main-bundle.js

В браузере нужно включить все эти 3 файла

<script src="foo-out.js"></script>
<script src="d3-browserify-out.js"></script>
<script src="main-bundle.js"></script>

Обновление: ссылка, которую я разместил, похоже, не работает, поэтому я включаю свой текущий gulpfile.js. Я новичок в gulp и javascript, поэтому может быть лучший способ сделать это. Но эта текущая установка в основном работает:

var browserify = require('browserify');

var gulp = require('gulp');

var watchify = require('watchify');

var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');

var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var gutil = require('gulp-util');

var del = require('del');

const PATH_OPTS = {
    src_dir: './client/js/src/',
    main_file_path: './client/js/src/main.js',
    output_file_name: 'disco.js',
    output_dir: './public/js/',
    common_lib_file_name: 'common.js'
};

const LIBS = ['paper', 'jquery', 'tocktimer'];

gulp.task("clientlib", function() {
    var bundler = browserify({
        debug: false
    });

    LIBS.forEach(function(lib) {
        bundler.require(lib);  
    });

    bundler.bundle()
    .pipe(source(PATH_OPTS.common_lib_file_name))
    // uglify seems to need a buffered stream...
    .pipe(buffer())
    .pipe(uglify())
        .on('error', gutil.log)
    .pipe(gulp.dest(PATH_OPTS.output_dir));
});

gulp.task('client', function () {
    var bundler = browserify({
        debug: true,
        cache: {},
        packageCache: {},
        fullPaths: true
    });

    bundler = watchify(bundler);

    bundler.on('update', function(){
        bundle(bundler);
    });

    bundler.on('log', function(msg) {
        gutil.log(msg);
    });

    bundler.add(PATH_OPTS.main_file_path);

    LIBS.forEach(function(lib) {
        bundler.external(require.resolve(lib, { expose: lib }));
    });

    return bundle(bundler);
});

function bundle(bundler) {
    return bundler.bundle()
        .pipe(source(PATH_OPTS.output_file_name)) 
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        // Add transformation tasks to the pipeline here.
        .pipe(uglify())
            .on('error', gutil.log)
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(PATH_OPTS.output_dir));
}

gulp.task('lint', function() {
    return gulp.src(PATH_OPTS.src_dir + '*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

gulp.task('clean', function () {
    return del([
        PATH_OPTS.output_dir + '/*.*'
    ]);
});

gulp.task('full', ['lint', 'clean', 'clientlib', 'client']);

gulp.task('default', ['lint', 'client']);
17.12.2015
  • Я только что попробовал это, и сгенерированный файл выглядит хорошо, но у меня возникла проблема с его использованием, когда я получаю Uncaught Error: Cannot find module 'react'. У меня есть react.js, перечисленные выше основного сценария приложения. 13.10.2016
  • Теперь у меня это работает, используя файл поставщиков (я пропустил этот бит), но без файла поставщиков он не найдет реакции - с файлом поставщиков он выдает ошибку о том, как я не должен минимизировать реакцию. Это безумие! 13.10.2016
  • В последнее время я не изучал это, но сейчас это решение кажется устаревшим. См. truongtx.me/2015. /11/03/ 08.12.2016
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..