Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Builging modules + publishing them on

Slide 4

Slide 4 text

@siddharthkp javascript architect @ practo

Slide 5

Slide 5 text

16 000 downloads

Slide 6

Slide 6 text

>

Slide 7

Slide 7 text

> npm whoami

Slide 8

Slide 8 text

> npm whoami siddharthkp

Slide 9

Slide 9 text

> 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

Slide 10

Slide 10 text

npmjs.com/signup

Slide 11

Slide 11 text

> npm login

Slide 12

Slide 12 text

> npm whoami

Slide 13

Slide 13 text

> npm whoami siddharthkp

Slide 14

Slide 14 text

> mkdir beep > cd beep

Slide 15

Slide 15 text

> npm init

Slide 16

Slide 16 text

> 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)

Slide 17

Slide 17 text

/* index.js */

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

> node index.js

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

> npm test

Slide 23

Slide 23 text

> npm test > npm t

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

> npm t

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

> npm t

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

/* 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);

Slide 41

Slide 41 text

> npm t

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

/* 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;

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

> node add.js

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

> node add.js

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

> npm publish

Slide 57

Slide 57 text

> npm publish + [email protected]

Slide 58

Slide 58 text

> npm install beep-sid

Slide 59

Slide 59 text

> npm install beep-sid > node add.js

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

/* cli.js */

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

> node cli.js

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

> node cli.js 2

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

> node cli.js 2

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

> npm publish

Slide 80

Slide 80 text

> npm publish + [email protected]

Slide 81

Slide 81 text

> sudo npm install beep-sid -g

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

#!/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);

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

> npm publish + [email protected]

Slide 90

Slide 90 text

> sudo npm install beep-sid -g > beep

Slide 91

Slide 91 text

> beep ? How many beeps do you want?

Slide 92

Slide 92 text

#!/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) }

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

> npm install inquirer --save

Slide 95

Slide 95 text

/* 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" } }

Slide 96

Slide 96 text

^ 3 0 1

Slide 97

Slide 97 text

^ 3 * *

Slide 98

Slide 98 text

~ 3 0 1

Slide 99

Slide 99 text

~ 3 0 *

Slide 100

Slide 100 text

/* 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" } }

Slide 101

Slide 101 text

/* 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" } }

Slide 102

Slide 102 text

#!/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) }

Slide 103

Slide 103 text

... else { }

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

> npm install colors --save

Slide 112

Slide 112 text

#!/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) }

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

/* 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" },

Slide 116

Slide 116 text

/* 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" },

Slide 117

Slide 117 text

> npm publish + [email protected]

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

/* 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" } }

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

/* 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" }

Slide 122

Slide 122 text

Size

Slide 123

Slide 123 text

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.

Slide 124

Slide 124 text

/* 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" } }

Slide 125

Slide 125 text

/* 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"] }

Slide 126

Slide 126 text

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.

Slide 127

Slide 127 text

> sudo npm install -g cost-of-modules

Slide 128

Slide 128 text

> cost-of-modules

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

No content

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

#!/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) }

Slide 133

Slide 133 text

#!/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) }

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

> cost-of-modules

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

/* 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" },

Slide 140

Slide 140 text

/* 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" },

Slide 141

Slide 141 text

> npm publish + [email protected]

Slide 142

Slide 142 text

now you’re an contributor

Slide 143

Slide 143 text

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