Require not defined error with browserify

Я новичок в браунировании и попытке загрузить модули npm в браузере, но я получаю следующую ошибку:

Неподготовлено ReferenceError: require не определен

Я следую учебнику из http://browserify.org/. Создал файл javascript со следующим содержимым:

var unique = require ('uniq');

затем запустите

npm install uniq

browserify main.js -o bundle.js

создается файл bundle.js, и я включил его в свой html, но все еще получаю вышеуказанную ошибку. Любые идеи, что я делаю неправильно?

Это содержимое окончательного файла HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script src="bundle.js"></script>
    <script src="script.js"></script>
</head>
<body>

</body>
</html>

Это содержимое bundle.js: http://pastebin.com/1ECkBceB

и это script.js:

var unique = require ('uniq');

Ответ 1

Функция "require" доступна только в контексте "bundle.js" script. Browserify принимает все необходимые файлы script и помещает их в файл "bundle.js" , поэтому вам нужно включить только "bundle.js" в файл HTML, а не файл "script.js".

Ответ 2

Короткий ответ: удалите script.js import

Более длинный ответ: Вы получаете ошибку, потому что метод require не определен в браузере. Вы не должны включать script.js.

Идея Browserify заключается в том, что вы можете разделить свои источники с помощью модулей CommonJS и объединить их в один файл, который будет использоваться в браузере. Browserify будет пересекать все ваши источники и объединить все файлы require d в комплект.

Ответ 3

Я лично предпочитаю хранить код библиотеки и код приложения отдельно. Поэтому я также создаю нечто вроде bundle.js и script.js.

существует простейшее обходное решение, которое делает эту работу. Это где-то в моем браузере файле:

window.require = require;

это выведет require в "глобальное" пространство имен. Затем вы можете потребовать все, что хотите, от script.js.

Однако вы отказываетесь от ОДНОГО преимущества: вам нужно будет включить все необходимые библиотеки в ваш файл браузера. Вы не получаете роскошь этого, находя все ваши зависимости, тогда!

Я полностью ожидаю, что люди будут плакать "грязным взломом" или "это не значит, что это должно быть". Да, может быть. Но я хочу, чтобы эти файлы были разделены. И пока я не включаю ничего, что называется "требовать", я буду в порядке, спасибо вам большое.

Иногда один глобальный может иметь значение.

Ответ 4

Кажется, что для запуска script вам нужно использовать автономный пакет.

browserify main.js --standalone Bundle > bundle.js

После этого вы должны иметь window.Bundle в bundle.js.
Поэтому в этот момент вы сможете получить доступ к script.js.

, если вы используете grunt

Если вы используете grunt install grunt-browserify.

npm install grunt-browserify --save-dev

И затем на grunt.js Gruntfile:

// Add the task
grunt.loadNpmTasks('grunt-browserify');

// Add the configuration:
browserify: {
    dist: {
        options: {
            // uncomment if you use babel
            // transform: [
            //     ["babelify", { "presets": ["env"] }]
            // ],
            browserifyOptions: {
                standalone: 'Bundle'
            }
        },
        files: {
           "bundle.js": ["main.js"]
        }
    }
},

, если вы используете gulp

 // on your build task
 var bundled = browserify('main.js', { standalone: 'Bundle' })
               .bundle()
               .pipe(source('bundle.js'))
               .pipe(gulp.dest(outDir));

Смотрите здесь для файла Chart.js gulp.

, если вы используете babel

Если вы используете babel и es6, возможно, вы экспортируете свой класс Bundle.

// you should have something like that 

class Bundle {
    ...

}

export default Bundle;

Итак, из-за того, что babel теперь использует Bundle, вы должны использовать Bundle.default и так:

// in script.js
var bundle = new Bundle.default();

Чтобы избежать этого синтаксиса, вы можете переопределить Bundle с помощью Bundle.default.

В конце bundle.js insert:

window.Bundle = window.Bundle.default;

Итак, теперь у вас будет:

// in script.js
var bundle = new Bundle.default();

Источники

Автономные браузерные сборки