Ответ 1
Функция "require" доступна только в контексте "bundle.js" script. Browserify принимает все необходимые файлы script и помещает их в файл "bundle.js" , поэтому вам нужно включить только "bundle.js" в файл HTML, а не файл "script.js".
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');
Ответы
Ответ 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();