Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

npm + browserify

4.845 Aufrufe

Veröffentlicht am

An introduction to npm and browserify i gave at basel.js

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

npm + browserify

  1. 1. First presented in 2009
  2. 2. Ryan Dahl, Joyent
  3. 3. Isaac Schlueter, Joyent
  4. 4. + Node v0.6.3 (2011-11-25)
  5. 5. https://blog.nodejitsu.com/npm-innovation-through-modularity/
  6. 6. https://blog.nodejitsu.com/npm-innovation-through-modularity/
  7. 7. http://www.modulecounts.com/
  8. 8. http://www.modulecounts.com/
  9. 9. Scaling issues?
  10. 10. http://nodejsreactions.tumblr.com/post/74396556262/the-npm-registry
  11. 11. #scalenpm
  12. 12. npmjs.eu Hosted by Maciej Małecki at Hetzner, Germany
  13. 13. • npm.strongloop.com • registry.nodejitsu.com • registry.npmjs.org.au • …
  14. 14. $ npm config set registry http://registry.npmjs.org $ npm install --registry http://registry.npmjs.org
  15. 15. npm, Inc. 2013
  16. 16. Technical details
  17. 17. • CommonJS Modules/1.0 • ~58’000 Modules • Just a manager / downloader • Not restricted to node.js / JavaScript • Anarchic • Only needs package.json
  18. 18. { "name": "youtube-search", "version": "0.0.3", "description": "Search for youtube videos", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "repository": { "type": "git", "url": "https://github.com/MaxGfeller/youtube-search" }, "keywords": [ "youtube", "search", "api" ], "author": "Max Gfeller <max.gfeller@gmail.com>", "license": "BSD", "dependencies": { "xml2js": "~0.2.8" } }
  19. 19. npm publish
  20. 20. Advantages of small packages • No overhead • Easier to replace • Easier to create • Easier to contribute • Independent versioning • Easier to break things • Discoverability • Demarcation
  21. 21. On the frontend side
  22. 22. @substack
  23. 23. browser-side require() the node.js way
  24. 24. var foo = require('./foo'); var gamma = require('gamma'); ! var n = gamma(foo(5) * 3); var txt = document.createTextNode(n); document.body.appendChild(txt);
  25. 25. Example #1
  26. 26. browser versions of node core libs • events • streams • path • url • assert • buffer • util • querystring • http • vm • crypto
  27. 27. Example #2
  28. 28. Transforms
  29. 29. Example #3
  30. 30. brfs browserify fs.readFileSync() static asset inliner
  31. 31. Widget images CSS JavaScript
  32. 32. Example #4
  33. 33. The „scripts“ field
  34. 34. { […] "scripts": { "prepublish": "git status", "publish": "echo "Package published!"", "install": "echo "Thanks for installing!"", "test": "tap tests/test-*.js", "start": "node app.js" } } $ npm run publish $ npm test $npm start
  35. 35. { "scripts": { "watch-js": "watchify app.js --debug > bundle.js", "watch-css": "catw styles/*.css > bundle.css", "watch-dev": "npm run watch-js & npm run watch-css", "build-js": "browserify app.js | uglifyjs -mc > bundle.js", "build-css": "cat styles/*.css > bundle.css", "start": "node app.js", "start-dev": "npm run watch-dev & npm start" } }
  36. 36. Example #5
  37. 37. Additional resources • http://browserify.org • https://github.com/substack/node-browserify • http://substack.net • https://twitter.com/browserify
  38. 38. Thanks! @mgfeller

×