browserify

Transcript

2. github.com/substack
3. browserify.org
4. github.com/substack/browserify-handbook
5. Integrando JavaScript • Diversos <script>; • Sensível à ordem; • Cada <script> gera uma requisição HTTP.
6. Concatenando tudo • Uma única tag <script>; • Logo uma única requisição HTTP; • Mas piora a detecção de erros (local do código fonte)*. * O browserify minimiza esse problema com a funcionalidade de source maps.
7. require • É a maneira de carregar e acessar código definido em outros arquivos; • É dado um único objeto (ou valor); • Portanto, sabe-se dizer exatamente de onde veio; • #include, using, import, ...
8. require using BibliotecaA; using BibliotecaB; using BibliotecaC; var foo = new Foo(); var bar = new Bar(foo); var a = require(‘biblioteca-a’) var b = require(‘biblioteca-b’) var c = require(‘biblioteca-c’) var foo = new a.Foo() var bar = new b.Bar(foo)
9. require var foo = require(‘./foo.js’) Em um arquivo que reside em /a/b, carrega o módulo /a/b/foo.js.
10. require var foo = require(‘foo’) Procura o módulo nas seguintes pastas: • /a/b/node_modules/foo • /a/node_modules/foo • /node_modules/foo
11. require var foo = require(‘foo’) A propriedade main do arquivo package.json da pasta foo decide qual arquivo será carregado.
12. require { “name”: “foo”, “version”: “1.2.3”, “main”: “app/foo.js” } A propriedade main do arquivo package.json da pasta foo decide qual arquivo será carregado.
13. module.exports • Cada arquivo .js é chamado de módulo; • Cada módulo possui seu próprio escopo (não é global).
14. module.exports module.exports = 5 Você pode exportar “qualquer coisa”.
15. module.exports module.exports = ‘hello world’ Você pode exportar “qualquer coisa”.
16. module.exports module.exports = function () { console.log(‘hello world’) } Você pode exportar “qualquer coisa”.
17. module.exports module.exports = { a: 5, b: function () { console.log(‘hello world’) } } Você pode exportar “qualquer coisa”.
18. module.exports module.exports = { a: 5, b: function () { console.log(‘hello world’) } } module.exports é convenientemente um objeto em branco.
19. module.exports module.exports.a = 5 module.exports.b = function () { console.log(‘hello world’) } module.exports é convenientemente um objeto em branco.
20. module.exports module.exports.a = 5 module.exports.b = function () { console.log(‘hello world’) } Existe também uma variável exports (e não module.exports) para reduzir o código escrito.
21. module.exports exports.a = 5 exports.b = function () { console.log(‘hello world’) } Existe também uma variável exports (e não module.exports) para reduzir o código escrito.
22. module.exports exports.a = 5 exports.b = function () { console.log(‘hello world’) } Mas nem sempre utilizar exports ao invés de module.exports funciona!
23. module.exports exports = function () { console.log(‘hello world’) } Mas nem sempre utilizar exports ao invés de module.exports funciona!
24. module.exports exports = function () { console.log(‘hello world’) } Quando atribuímos um valor novo a variável exports (ao invés de criar uma propriedade nova no objeto) estamos alterando apenas a variável exports, e não o module.exports (que é o que será exportado).
25. module.exports var module = { exports: { } } var exports = module.exports Quando atribuímos um valor novo a variável exports (ao invés de criar uma propriedade nova no objeto) estamos alterando apenas a variável exports, e não o module.exports (que é o que será exportado).
26. browserify • Os browsers não possuem require, mas browserify permite escrever código utilizando require, similar à Node; • Ele navega por cada require de seu código fonte e, além de fazer o require funcionar, empacota tudo em único arquivo.
27. browserify $ npm install -g browserify
28. browserify $ browserify main.js -o bundle.js <script src="bundle.js"></script>
29. Compatibilidade com módulos para Node Para deixar alguns dos módulos criados para Node compatível com o browser, o browserify oferece uma implementação alguns dos módulos padrões do Node. assert, buffer, console, constants, crypto, domain, events, http, https, os, path, punycode, querystring, stream, string_decoder, timers, tty, url, util, vm, zlib.
30. watchify $ watchify main.js -o bundle.js Gera automaticamente o arquivo bundle.js quando o arquivo main.js é modificado.