Начало работы с Browserify

Реализации JavaScript становятся все более и более сложными, так как прекрасный зверь, которого мы называем Интернетом, развивается с каждым годом. Многие из нас сейчас работают с модулями JavaScript — независимо функционирующими компонентами, которые объединяются в единое целое, но могут с радостью заменить любой компонент, не вызывая армагеддона. Многие из нас используют шаблон модуля AMD и RequireJS для достижения этой цели.

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

Что такое Browserify?

Browserify позволяет использовать в браузере модули стиля node.js. Мы определяем зависимости, а затем Browserify объединяет все это в один аккуратный и аккуратный файл JavaScript. Вы включаете необходимые файлы JavaScript с помощью операторов require('./yourfancyJSfile.js') а также можете импортировать общедоступные модули из npm. Для Browserify также довольно просто сгенерировать исходные карты, чтобы вы могли отлаживать каждый файл JS по отдельности, несмотря на то, что он все объединен в один.

Зачем импортировать модули узла?

Импорт модулей — это благословение — вместо того, чтобы посещать различные сайты для загрузки библиотек для вашего JavaScript, просто включите их с помощью операторов require() , убедитесь, что модули установлены и вы готовы к работе. Часто используемые библиотеки JavaScript, такие как jQuery , Underscore , Backbone и даже Angular (как неофициальный дистрибутив), доступны для работы. Если вы работаете над сайтом, на котором уже работает узел, вы упрощаете работу еще больше с помощью одного общего способа структурировать весь свой JS. Мне действительно нравится эта концепция.

Что вам нужно

Чтобы начать работу с Browserify, вам понадобится минимум:

• Node.js
• npm — по умолчанию устанавливается с узлом.
• Browserify — я объясню, как установить этот.
• Пакет модулей JavaScript, которые вы готовы приручить!

Начиная

Для начала вам понадобится узел и npm, установленные на вашем компьютере. Перейдите по ссылкам выше, если вы ищете руководство по их установке. Если вы полностью застряли, попробуйте эти инструкции по установке Node.js через менеджер пакетов . Вам не нужно будет выполнять какие-либо работы с узлами, чтобы использовать Browserify. Мы устанавливаем узел исключительно потому, что с него запускается npm. Получив npm, вы можете установить Browserify с помощью следующей команды:

 npm install -g browserify 

Здесь мы используем npm для глобальной установки Browserify на ваш компьютер ( -g указывает npm установить глобально модуль).

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

 Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify' 

Тогда у вас есть проблема с разрешением. Вы можете sudo команду sudo , но я рекомендую проверить этот пост.

Создание вашего первого файла Browserify

Давайте начнем с создания файла Browserified JavaScript, который импортирует чрезвычайно популярный модуль Underscore . Мы будем использовать Underscore, чтобы выследить Супермена. Я назвал свой файл JS main.js и поместил его в папку js в моем проекте.

Мы начнем с присвоения переменной _ Underscore с помощью оператора Browserify require() в нашем JavaScript:

 var _ = require('underscore'); 

Далее мы будем использовать функции each() и find() из Underscore. Мы проверим два массива имен и запустим console.log чтобы узнать, видит ли он Супермена или нет. Высокотехнологичные вещи, о которых Лекс Лютор мог только мечтать Наш окончательный код JavaScript будет выглядеть так:

 var _ = require('underscore'), names = ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'], otherNames = ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen']; _.each([names, otherNames], function(nameGroup) { findSuperman(nameGroup); }); function findSuperman(values) { _.find(values, function(name) { if (name === 'Clark Kent') { console.log('It\'s Superman!'); } else { console.log('... No superman!'); } }); } 

Мы хотим убедиться, что Browserify сможет найти модуль npm, когда попытается добавить его в наш проект. Основные основы для этого включают в себя открытие терминала, переход к папке, в которой находится ваш проект JavaScript, а затем выполнение этой команды для установки Underscore в эту папку:

 npm install underscore 

Для тех, кто не node_modules как работают node и npm, в вашем проекте создается папка с именем node_modules в которой содержится код для вашего модуля Underscore. Команда извлекает последнюю версию Underscore из репозитория npm по адресу https://registry.npmjs.org/underscore . С этим модулем в нашей папке node_modules, теперь Browserify может найти его и использовать.

 browserify js/main.js -o js/findem.js -d 

 <script src="js/findem.js"></script> 

 greatestModuleEver = require('./your_module.js'); 

 module.exports = function(vars) { // Your code } 

 module.exports = function() { return ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen', 'Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent']; } 

 var _ = require('underscore'), names = require('./names.js'); findSuperman(names()); function findSuperman(values) { _.find(values, function(name) { if (name === 'Clark Kent') { console.log('It\'s Superman!'); } else { console.log('... No superman!'); } }); } 

 module.exports = function (values) { var foundSuperman = false; _.find(values, function(name) { if (name === 'Clark Kent') { console.log('It\'s Superman!'); foundSuperman = true; } else { console.log('... No superman!'); } }); return foundSuperman; } 

 var _ = require('underscore'); module.exports = function (values) { ... 

 var _ = require('underscore'), names = require('./names.js'), findSuperman = require('./findsuperman.js'); if (findSuperman(names())) { document.write('We found Superman'); } else { document.write('No Superman...'); } 

 { "name": "FindSuperman", "version": "0.0.1", "author": , "description": "Code designed to find the elusive red blue blur", "dependencies": { "underscore": "1.6.x" }, "devDependencies": { "browserify": "latest" } } 

 "scripts": { "build-js": "browserify js/main.js > js/findem.js" } 

 npm run build-js 

 "devDependencies": { "browserify": "latest", "watchify": "latest" }, "scripts": { "build-js": "browserify js/main.js > js/findem.js", "watch-js": "watchify js/main.js -o js/findem.js" } 

 npm run watch-js 

 "watch-js": "watchify js/main.js -o js/findem.js -v" 

 121104 bytes written to js/findem.js (0.26 seconds) 121119 bytes written to js/findem.js (0.03 seconds) 

 "scripts": { "build-js": "browserify js/main.js > js/findem.js -d", "watch-js": "watchify js/main.js -o js/findem.js -d" } 

 "watch-js": "watchify js/main.js -o js/findem.js -dv" 

 { "name": "FindSuperman", "version": "0.0.1", "author": , "description": "Code designed to find the elusive red blue blur", "dependencies": { "underscore": "1.6.x" }, "devDependencies": { "browserify": "latest", "grunt": "~0.4.0", "grunt-browserify": "latest", "grunt-contrib-watch": "latest" } } 

 module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-browserify'); grunt.registerTask('default', ['browserify', 'watch']); grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), browserify: { main: { src: 'js/main.js', dest: 'js/findem.js' } }, watch: { files: 'js/*', tasks: ['default'] } }); } 

 grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-browserify'); 

 grunt.registerTask('default', ['browserify', 'watch']); 

 grunt.initConfig({ 

 pkg: grunt.file.readJSON('package.json'), 

 browserify: { main: { src: 'js/main.js', dest: 'js/findem.js' } }, 

 watch: { files: 'js/*', tasks: ['default'] } 

 browserify: { main: { options: { bundleOptions: { debug: true } }, src: 'js/main.js', dest: 'js/findem.js' } }, 

 npm install -g gulp 

 "devDependencies": { "browserify": "latest", "watchify": "latest", "gulp": "3.7.0", "vinyl-source-stream": "latest" } 

 var browserify = require('browserify'), watchify = require('watchify'), gulp = require('gulp'), source = require('vinyl-source-stream'), sourceFile = './js/main.js', destFolder = './js/', destFile = 'findem.js'; gulp.task('browserify', function() { return browserify(sourceFile) .bundle() .pipe(source(destFile)) .pipe(gulp.dest(destFolder)); }); gulp.task('watch', function() { var bundler = watchify(sourceFile); bundler.on('update', rebundle); function rebundle() { return bundler.bundle() .pipe(source(destFile)) .pipe(gulp.dest(destFolder)); } return rebundle(); }); gulp.task('default', ['browserify', 'watch']); 

 gulp.task('browserify', function() { 

 return browserify(sourceFile) 

 .bundle() 

 .pipe(source(destFile)) .pipe(gulp.dest(destFolder)); 

 gulp.task('watch', function() { 

 var bundler = watchify(sourceFile); 

 bundler.on('update', rebundle); 

 function rebundle() { return bundler.bundle() .pipe(source(destFile)) .pipe(gulp.dest(destFolder)); } return rebundle(); }); 

 gulp.task('default', ['browserify', 'watch']); 

 gulp 

 gulp browserify 

 gulp watch 

 gulp.task('browserify', function() { return browserify(sourceFile) .bundle({debug:true}) .pipe(source(destFile)) .pipe(gulp.dest(destFolder)); }); 

 function rebundle() { return bundler.bundle({debug:true}) .pipe(source(destFile)) .pipe(gulp.dest(destFolder)); }