Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building node modules

Building node modules

Slides from a nodeschool workshop

Siddharth Kshetrapal

February 12, 2017
Tweet

More Decks by Siddharth Kshetrapal

Other Decks in Technology

Transcript

  1. Builging modules + publishing them on

    View full-size slide

  2. @siddharthkp
    javascript architect @ practo

    View full-size slide

  3. 16 000
    downloads

    View full-size slide

  4. > npm whoami

    View full-size slide

  5. > npm whoami
    siddharthkp

    View full-size slide

  6. > npm whoami
    npm ERR! code ENEEDAUTH
    npm ERR! needs auth this command requires you to be logged in.
    npm ERR! needs auth You need to authorize this machine using

    View full-size slide

  7. npmjs.com/signup

    View full-size slide

  8. > npm whoami

    View full-size slide

  9. > npm whoami
    siddharthkp

    View full-size slide

  10. > mkdir beep
    > cd beep

    View full-size slide

  11. > npm init
    name: beep-sid
    version: (1.0.0)
    description: beeper module
    entry point: (index.js)
    test command:
    git repository:
    keywords: beep, sound
    license: (MIT)

    View full-size slide

  12. /* index.js */

    View full-size slide

  13. /* index.js */
    function beep () {
    process.stdout.write('\u0007');
    }
    beep();

    View full-size slide

  14. > node index.js

    View full-size slide

  15. /* package.json */
    {
    "name": "beep-sid",
    "version": "1.0.0",
    "description": "beeper module",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    }
    }

    View full-size slide

  16. /* package.json */
    {
    "name": "beep-sid",
    "version": "1.0.0",
    "description": "beeper module",
    "main": "index.js",
    "scripts": {
    "test": "node index.js"
    }
    }

    View full-size slide

  17. > npm test
    > npm t

    View full-size slide

  18. /* index.js */
    function beep () {
    process.stdout.write('\u0007');
    }

    View full-size slide

  19. /* index.js */
    function beep () { process.stdout.write('\u0007'); }

    View full-size slide

  20. /* index.js */
    function beep () { process.stdout.write('\u0007'); }
    function beepTwice () {
    }

    View full-size slide

  21. /* index.js */
    function beep () { process.stdout.write('\u0007'); }
    function beepTwice () {
    beep();
    beep();
    }
    beepTwice();

    View full-size slide

  22. /* index.js */
    function beep () { process.stdout.write('\u0007'); }
    function beepTwice () {
    beep();
    beep();
    }

    View full-size slide

  23. /* index.js */
    function beep () { process.stdout.write('\u0007'); }
    function beepTwice () {
    beep();
    setTimeout(function () {
    beep();
    }, 500);
    }

    View full-size slide

  24. /* index.js */
    function beep () { process.stdout.write('\u0007'); }
    function beepTwice () {
    beep();
    setTimeout(function () {
    beep();
    }, 500);
    }
    beepTwice();

    View full-size slide

  25. /* index.js */
    function beep () { process.stdout.write('\u0007'); }
    function beepThrice () {
    }

    View full-size slide

  26. /* index.js */
    function beep () { process.stdout.write('\u0007'); }
    function beepThrice () {
    beep();
    setTimeout(function () {
    beep();
    }, 500);
    }

    View full-size slide

  27. /* index.js */
    function beep () { process.stdout.write('\u0007'); }
    function beepThrice () {
    beep();
    setTimeout(function () {
    beep();
    setTimeout(function () {
    beep()
    }, 500);
    }, 500);
    }

    View full-size slide

  28. /* index.js */
    function beep () { process.stdout.write('\u0007'); }
    function beepN (n) {
    }

    View full-size slide

  29. /* index.js */
    function beep () { process.stdout.write('\u0007'); }
    function beepN (n) {
    if (n > 0) {
    }
    }

    View full-size slide

  30. /* index.js */
    function beep () { process.stdout.write('\u0007'); }
    function beepN (n) {
    if (n > 0) {
    beep();
    n = n - 1;
    beepN(n);
    }
    }

    View full-size slide

  31. /* index.js */
    function beep () { process.stdout.write('\u0007'); }
    function beepN (n) {
    if (n > 0) {
    beep();
    n = n - 1;
    setTimeout(function () {
    beepN(n);
    }, 500);
    }
    }

    View full-size slide

  32. /* index.js */
    function beep () { process.stdout.write('\u0007'); }
    function beepN (n) {
    if (n > 0) {
    beep();
    n = n - 1;
    setTimeout(function () {
    beepN(n);
    }, 500);
    }
    }
    beepN(3);

    View full-size slide

  33. /* add.js */
    function add () {
    }

    View full-size slide

  34. /* add.js */
    function add (a, b) {
    var c = a + b;
    console.log(c);
    }

    View full-size slide

  35. /* add.js */
    function add (a, b) {
    var c = a + b;
    console.log(c);
    beep(2);
    }

    View full-size slide

  36. /* add.js */
    var beep = require('./index.js');
    function add (a, b) {
    var c = a + b;
    console.log(c);
    beep(2);
    }

    View full-size slide

  37. /* index.js */
    function beep () { process.stdout.write('\u0007'); }
    function beepN (n) {
    if (n > 0) {
    beep();
    n = n - 1;
    setTimeout(function () {
    beepN(n);
    }, 500);
    }
    }

    View full-size slide

  38. /* index.js */
    function beep () { process.stdout.write('\u0007'); }
    function beepN (n) {
    if (n > 0) {
    beep();
    n = n - 1;
    setTimeout(function () {
    beepN(n);
    }, 500);
    }
    }
    module.exports = beepN;

    View full-size slide

  39. /* add.js */
    var beep = require('./index.js');
    function add (a, b) {
    var c = a + b;
    console.log(c);
    beep(2);
    }
    add(2, 3);

    View full-size slide

  40. > node add.js

    View full-size slide

  41. /* add.js */
    var beep = require('./index.js');
    function add (a, b) {
    var c = a + b;
    console.log(c);
    beep(2);
    }

    View full-size slide

  42. /* add.js */
    var beep = require('beep-sid');
    function add (a, b) {
    var c = a + b;
    console.log(c);
    beep(2);
    }

    View full-size slide

  43. > node add.js

    View full-size slide

  44. > node add.js
    module.js:442
    throw err;
    ^
    Error: Cannot find module 'beep-sid'

    View full-size slide

  45. > npm publish

    View full-size slide

  46. > npm install beep-sid

    View full-size slide

  47. > npm install beep-sid
    > node add.js

    View full-size slide

  48. /* cli.js */

    View full-size slide

  49. #!/usr/bin/env node
    /* cli.js */

    View full-size slide

  50. #!/usr/bin/env node
    /* cli.js */
    var beep = require('./index.js');
    beep(1);

    View full-size slide

  51. > node cli.js

    View full-size slide

  52. #!/usr/bin/env node
    /* cli.js */
    var beep = require('./index.js');
    beep(1);

    View full-size slide

  53. #!/usr/bin/env node
    /* cli.js */
    var beep = require('./index.js');
    var arguments = process.argv;

    View full-size slide

  54. #!/usr/bin/env node
    /* cli.js */
    var beep = require('./index.js');
    var arguments = process.argv;
    console.log(arguments);

    View full-size slide

  55. > node cli.js 2

    View full-size slide

  56. > node cli.js 2
    [ '/usr/local/bin/node',
    '/Users/siddharth/Code/learn/beep/cli.js',
    '2' ]

    View full-size slide

  57. #!/usr/bin/env node
    /* cli.js */
    var beep = require('./index.js');
    var arguments = process.argv;
    var count = arguments[2];

    View full-size slide

  58. #!/usr/bin/env node
    /* cli.js */
    var beep = require('./index.js');
    var arguments = process.argv;
    var count = arguments[2];
    beep(count);

    View full-size slide

  59. > node cli.js 2

    View full-size slide

  60. /* package.json */
    {
    "name": "beep-sid",
    "version": "1.0.0",
    "description": "beeper module",
    "main": "index.js",
    "scripts": { "test": "node index.js" }
    }

    View full-size slide

  61. /* package.json */
    {
    "name": "beep-sid",
    "version": "1.0.0",
    "description": "beeper module",
    "main": "index.js",
    "bin": {
    },
    "scripts": { "test": "node index.js" }
    }

    View full-size slide

  62. /* package.json */
    {
    "name": "beep-sid",
    "version": "1.0.0",
    "description": "beeper module",
    "main": "index.js",
    "bin": {
    "beep": "cli.js"
    },
    "scripts": { "test": "node index.js" }
    }

    View full-size slide

  63. /* package.json */
    {
    "name": "beep-sid",
    "version": "1.0.0",
    "description": "beeper module",
    "main": "index.js",
    "bin": {
    "beep": "cli.js"
    },
    "scripts": {
    "test": "node index.js"
    }

    View full-size slide

  64. /* package.json */
    {
    "name": "beep-sid",
    "version": "1.1.0",
    "description": "beeper module",
    "main": "index.js",
    "bin": {
    "beep": "cli.js"
    },
    "scripts": {
    "test": "node index.js"
    }

    View full-size slide

  65. > npm publish

    View full-size slide

  66. > sudo npm install beep-sid -g

    View full-size slide

  67. > sudo npm install beep-sid -g
    > beep 2

    View full-size slide

  68. > sudo npm install beep-sid -g
    > beep 2
    > beep

    View full-size slide

  69. #!/usr/bin/env node
    /* cli.js */
    var beep = require('./index.js');
    var arguments = process.argv;
    var count = arguments[2];
    beep(count);

    View full-size slide

  70. #!/usr/bin/env node
    /* cli.js */
    var beep = require('./index.js');
    var arguments = process.argv;
    var count = arguments[2];
    if (!count) count = 1;
    beep(count);

    View full-size slide

  71. /* package.json */
    {
    "name": "beep-sid",
    "version": "1.1.0",
    "description": "beeper module",
    "main": "index.js",
    "bin": {
    "beep": "cli.js"
    },
    "scripts": { "test": "node index.js" }
    }

    View full-size slide

  72. /* package.json */
    {
    "name": "beep-sid",
    "version": "1.1.1",
    "description": "beeper module",
    "main": "index.js",
    "bin": {
    "beep": "cli.js"
    },
    "scripts": { "test": "node index.js" }
    }

    View full-size slide

  73. > sudo npm install beep-sid -g
    > beep

    View full-size slide

  74. > beep
    ? How many beeps do you want?

    View full-size slide

  75. #!/usr/bin/env node
    /* cli.js */
    var beep = require('./index.js');
    var arguments = process.argv;
    var count = arguments[2];
    if (count) beep(count);
    else {
    // ask for count and then beep(count)
    }

    View full-size slide

  76. > npm install inquirer --save

    View full-size slide

  77. /* package.json */
    {
    "name": "beep-sid",
    "version": "1.1.1",
    "description": "beeper module",
    "main": "index.js",
    "bin": { "beep": "cli.js" },
    "scripts": { "test": "node index.js" },
    "dependencies": {
    "inquirer": "^3.0.1"
    }
    }

    View full-size slide

  78. /* package.json */
    {
    "name": "beep-sid",
    "version": "1.1.1",
    "description": "beeper module",
    "main": "index.js",
    "bin": { "beep": "cli.js" },
    "scripts": { "test": "node index.js" },
    "dependencies": {
    "inquirer": "^3.0.1"
    }
    }

    View full-size slide

  79. /* package.json */
    {
    "name": "beep-sid",
    "version": "1.1.1",
    "description": "beeper module",
    "main": "index.js",
    "bin": { "beep": "cli.js" },
    "scripts": { "test": "node index.js" },
    "dependencies": {
    "inquirer": "3.0.1"
    }
    }

    View full-size slide

  80. #!/usr/bin/env node
    /* cli.js */
    var beep = require('./index.js');
    var inquirer = require('inquirer');
    var arguments = process.argv;
    var count = arguments[2];
    if (count) beep(count);
    else {
    // ask for count and then beep(count)
    }

    View full-size slide

  81. ...
    else {
    var question = {
    name: 'count',
    type: 'input',
    message: 'How many beeps do you want?'
    };
    }

    View full-size slide

  82. ...
    else {
    var question = {
    name: 'count',
    type: 'input',
    message: 'How many beeps do you want?'
    };
    inquirer.prompt(question)
    }

    View full-size slide

  83. ...
    else {
    var question = {
    name: 'count',
    type: 'input',
    message: 'How many beeps do you want?'
    };
    inquirer.prompt(question)
    .then(function (answer) {
    });
    }

    View full-size slide

  84. ...
    else {
    var question = {
    name: 'count',
    type: 'input',
    message: 'How many beeps do you want?'
    };
    inquirer.prompt(question)
    .then(function (answer) {
    beep(answer.count);
    });
    }

    View full-size slide

  85. > node cli.js
    ? How many beeps do you want?

    View full-size slide

  86. > node cli.js
    ? How many beeps do you want?

    View full-size slide

  87. > npm install colors --save

    View full-size slide

  88. #!/usr/bin/env node
    /* cli.js */
    var beep = require('./index.js');
    var inquirer = require('inquirer');
    var colors = require('colors');
    var arguments = process.argv;
    var count = arguments[2];
    if (count) beep(count);
    else {
    // ask for count and then beep(count)
    }

    View full-size slide

  89. ...
    else {
    var question = {
    name: 'count',
    type: 'input',
    message: 'How many beeps do you want?'.blue
    };
    inquirer.prompt(question)
    .then(function (answer) {
    beep(answer.count);
    });
    }

    View full-size slide

  90. > node cli.js
    ? How many beeps do you want?

    View full-size slide

  91. /* package.json */
    {
    "name": "beep-sid",
    "version": "1.1.1",
    "description": "beeper module",
    "main": "index.js",
    "bin": { "beep": "cli.js" },
    "scripts": { "test": "node index.js" },
    "dependencies": {
    "colors": "1.1.2",
    "enquirer": "3.1.0"
    },

    View full-size slide

  92. /* package.json */
    {
    "name": "beep-sid",
    "version": "2.0.0",
    "description": "beeper module",
    "main": "index.js",
    "bin": { "beep": "cli.js" },
    "scripts": { "test": "node index.js" },
    "dependencies": {
    "colors": "1.1.2",
    "enquirer": "3.1.0"
    },

    View full-size slide

  93. /* package.json */
    {
    "name": "beep-sid",
    "version": "2.0.0",
    "description": "beeper module",
    "main": "index.js",
    "bin": { "beep": "cli.js" },
    "scripts": { "test": "node index.js" },
    "dependencies": { "colors": "1.1.2", "enquirer": "3.0.1" }
    }

    View full-size slide

  94. missing fields
    https://npm-janitor-api.now.sh/
    npm docs
    https://docs.npmjs.com/files/package.json

    View full-size slide

  95. /* package.json */
    {
    "name": "beep-sid",
    "version": "2.0.0",
    "description": "beeper module",
    "main": "index.js",
    "bin": { "beep": "cli.js" },
    "scripts": { "test": "node index.js" },
    "dependencies": { "colors": "1.1.2", "enquirer": "3.0.1" },
    "files": ["cli.js", "index.js"],
    "bugs": {
    "url" : "https://github.com/siddharthkp/beep/issues"
    }

    View full-size slide

  96. 1. Make sure there are no extra modules or development tools in dependencies.
    2. Only include the files you need by using ‘files’ in your package.json.
    3. Use modules which do the job and take the least amount of space.

    View full-size slide

  97. /* package.json */
    {
    "name": "beep-sid",
    "version": "1.1.1",
    "description": "beeper module",
    "main": "index.js",
    "bin": { "beep": "cli.js" },
    "scripts": { "test": "node index.js" },
    "dependencies": {
    "colors": "1.1.2",
    "inquirer": "3.0.1"
    }
    }

    View full-size slide

  98. /* package.json */
    {
    "name": "beep-sid",
    "version": "2.0.0",
    "description": "beeper module",
    "main": "index.js",
    "bin": { "beep": "cli.js" },
    "scripts": { "test": "node index.js" },
    "dependencies": {
    "colors": "1.1.2", "enquirer": "3.0.1"
    },
    "files": ["index.js", "cli.js"]
    }

    View full-size slide

  99. 1. Make sure there are no extra modules or development tools in dependencies.
    2. Only include the files you need by using ‘files’ in your package.json.
    3. Use modules which do the job and take the least amount of space.

    View full-size slide

  100. > sudo npm install -g cost-of-modules

    View full-size slide

  101. > cost-of-modules

    View full-size slide

  102. > cost-of-modules
    ┌───────────┬─────────────┬────────┐
    │ name │ children │ size │
    ├───────────┼─────────────┼────────┤
    │ inquirer │ 26 │ 12.72M │
    ├───────────┼─────────────┼────────┤
    │ colors │ 0 │ 0.07M │
    ├───────────┼─────────────┼────────┤
    │ 2 modules │ 26 children │ 12.80M │
    └───────────┴─────────────┴────────┘

    View full-size slide

  103. > npm uninstall inquirer --save
    > npm install prompt --save

    View full-size slide

  104. #!/usr/bin/env node
    /* cli.js */
    var beep = require('./index.js');
    var inquirer = require('inquirer');
    var colors = require('colors');
    var arguments = process.argv;
    var count = arguments[2];
    if (count) beep(count);
    else {
    // ask for count and then beep(count)
    }

    View full-size slide

  105. #!/usr/bin/env node
    /* cli.js */
    var beep = require('./index.js');
    var prompt = require('prompt');
    var colors = require('colors');
    var arguments = process.argv;
    var count = arguments[2];
    if (count) beep(count);
    else {
    // ask for count and then beep(count)
    }

    View full-size slide

  106. ...
    else {
    var question = {
    name: 'count',
    type: 'input',
    message: 'How many beeps do you want?'.blue
    };
    inquirer.prompt(question)
    .then(function (answer) {
    beep(answer.count);
    });
    }

    View full-size slide

  107. ...
    else {
    var question = {
    name: 'count',
    type: 'input',
    message: 'How many beeps do you want?'.blue
    };
    prompt.get(question, function (answer) {
    beep(answer.count);
    });
    }

    View full-size slide

  108. > node cli.js
    ? How many beeps do you want?

    View full-size slide

  109. > cost-of-modules

    View full-size slide

  110. > cost-of-modules
    ┌───────────┬─────────────┬────────┐
    │ name │ children │ size │
    ├───────────┼─────────────┼────────┤
    │ prompt │ 31 │ 2.30M │
    ├───────────┼─────────────┼────────┤
    │ colors │ 0 │ 0.07M │
    ├───────────┼─────────────┼────────┤
    │ 2 modules │ 28 children │ 2.11M │
    └───────────┴─────────────┴────────┘

    View full-size slide

  111. /* package.json */
    {
    "name": "beep-sid",
    "version": "2.0.0",
    "description": "beeper module",
    "main": "index.js",
    "bin": { "beep": "cli.js" },
    "scripts": { "test": "node index.js" },
    "dependencies": {
    "colors": "1.1.2",
    "enquirer": "3.1.0"
    },

    View full-size slide

  112. /* package.json */
    {
    "name": "beep-sid",
    "version": "2.0.1",
    "description": "beeper module",
    "main": "index.js",
    "bin": { "beep": "cli.js" },
    "scripts": { "test": "node index.js" },
    "dependencies": {
    "colors": "1.1.2",
    "enquirer": "3.1.0"
    },

    View full-size slide

  113. now you’re an
    contributor

    View full-size slide

  114. @siddharthkp
    slides: bit.ly/npm-modules
    code: github.com/siddharthkp/beep
    newsletter: siddharthkp.github.io/#newsletter
    (node + react)

    View full-size slide