Clever Geek Handbook

Panduan pemula untuk Node.js Bagian 3





Selamat siang teman!



Saya terus memposting terjemahan tutorial Node.js ini .



Bagian lain:



Bagian 1

Bagian 2

Bagian 3

Bagian 4



Mendapatkan data yang dimasukkan pengguna di Node.js

Bagaimana cara membuat program Node.js interaktif?



Untuk melakukan ini, versi 7 dari Node.js memperkenalkan modul readline : ini berfungsi untuk mendapatkan data dari aliran untuk dibaca, seperti process.stdinbaris perintah selama pelaksanaan program Node.js. 



const readline = require('readline').createInterface({
    input: process.stdin,
    output: process.stdout
})

readline.question(`What is your name?`, name => {
    console.log(`Hi ${name}!`)
    readline.close()
})


Kode ini menanyakan nama pengguna, setelah pengguna mengetik dan mengklik enter, sebuah salam ditampilkan.



Metode ini question()mencetak parameter pertama (pertanyaan) ke konsol dan menunggu respons pengguna. Saat ditekan enter, fungsi panggilan balik dijalankan.



Dalam panggilan balik ini, kami menutup antarmuka readline.



readlineberisi metode lain, yang dapat Anda baca dalam dokumentasi.



Jika Anda perlu meminta kata sandi, yang terbaik adalah tidak mengembalikannya secara eksplisit, melainkan menggunakan simbol *.



Salah satu cara untuk melakukan ini adalah dengan menggunakan paket readline-sync , yang mudah dimengerti dan mudah dikonfigurasi.



Solusi yang lebih lengkap dan abstrak disediakan oleh paket Inquirer.js .



Kami menginstalnya dengan bantuan npm install inquirerdan menggunakannya sebagai berikut: 



const inquirer = require('inquirer')

const questions = [
    {
        type: 'input',
        name: 'name',
        message: `What's your name?`
    }
]

inquirer.prompt(questions).then(answers => {
    console.log(`Hi ${answers['name']}!`)
})


Inquirer.js memungkinkan Anda melakukan banyak hal keren, seperti menyarankan beberapa pilihan, menyediakan tombol radio, meminta konfirmasi, dll.



Ini lebih dikenal sebagai alternatif untuk solusi bawaan, tetapi jika Anda berencana untuk membawa pengalaman pengguna ke tingkat berikutnya, Inquirer.js adalah solusi terbaik.



Memperluas Fungsi File Node.js Menggunakan Ekspor

Node.js memiliki sistem modular bawaan.



File Node.js dapat mengimpor fungsionalitas dari file Node.js lainnya.



Ketika Anda ingin mengimpor sesuatu yang Anda gunakan const library = require('./library')

untuk mengimpor fungsi yang diekspor dalam file yang library.jsterletak di direktori saat ini.



Dalam file ini, fungsionalitas harus diekspor sebelum dapat diimpor dalam file lain.



Objek atau variabel lain apa pun yang ditentukan dalam file secara default privat (pribadi) dan tidak dapat digunakan dalam file lain.



Inilah yang antarmuka yang module.exportsdisediakan oleh sistem modular memungkinkan kita untuk melakukannya .



Saat Anda menetapkan objek atau fungsi sebagai properti baru objekexports, Anda mengekspornya, dan kemudian mereka dapat diimpor di tempat lain di aplikasi atau di aplikasi lain.



Ini bisa dilakukan dengan dua cara.



Cara pertama adalah menetapkan nilai module.exports, yang merupakan objek default yang disediakan oleh sistem modular. Metode ini memungkinkan Anda untuk hanya mengekspor objek ini: 



const car = {
    brand: 'Ford',
    model: 'Fiesta'
}

module.exports = car 

//   
const car = require('./car')


Cara kedua adalah menambahkan objek yang diekspor sebagai properti objek exports. Metode ini memungkinkan Anda untuk mengekspor banyak objek, fungsi, atau data: 



const car = {
    brand: 'Ford',
    model: 'Fiesta'
}

exports.car = car


atau lebih 



exports.car = {
    brand: 'Ford',
    model: 'Fiesta'
}


Untuk menggunakan objek ini di file lain, Anda harus membuat tautan ke impor: 



const items = require('./items')
items.car


atau 



const car = require('./items').car


Apa perbedaan antara module.exportsdan exports?



Yang pertama mengekspor objek yang direferensikan, yang kedua properti dari objek.



Pengantar manajer paket npm

Pengantar npm

npmApakah manajer paket Node.js default.



Pada Januari 2017, npm memiliki lebih dari 350.000 paket, menjadikannya repositori kode terbesar dalam satu bahasa pemrograman di Bumi, dan Anda dapat yakin bahwa ada paket untuk apa saja.



Semuanya dimulai dengan mengunduh dan mengelola dependensi di Node.js, tetapi tak lama kemudian alat ini mulai digunakan secara aktif dalam pengembangan sisi aplikasi klien.



npmmelakukan beberapa hal.



Alternatif untuk npm adalah benang .



Memuat

npmmengelola pemuatan dependensi proyek.



Jika ada file dalam proyek, package.jsonpeluncuran npm installakan menginstal semua yang diperlukan proyek ke direktori node_modulesyang dibuat jika tidak ada.



Paket tertentu dapat diinstal menggunakan npm install <package-name>.



Seringkali instalasi paket disertai dengan bendera:



  • --save - instal paket dan tambahkan entri tentangnya ke bagian dependensi file package.json
  • --save-dev - instal paket dan tambahkan entri tentangnya ke bagian devDependencies pada file package.json


Perbedaan utama adalah bahwa dependensi devDigunakan untuk tujuan pengembangan, misalnya, untuk pengujian, dan dependensi digunakan dalam produksi (saat membangun proyek).



Memperbarui paket

Memperbarui dengan mudah npm update.



npmakan memeriksa semua paket untuk versi baru yang memenuhi batasan yang ditetapkan.



Anda juga dapat memperbarui paket tertentu: npm update <package-name>.



Versi

Selain unduhan standar, npm mendukung versi, sehingga Anda dapat menentukan versi spesifik suatu paket, atau meminta versi yang lebih baru atau lebih lama.



Anda akan sering menemukan bahwa satu perpustakaan hanya kompatibel dengan versi tertentu (utama) dari perpustakaan lain.



Dan juga dengan bug dari rilis terbaru yang belum diperbaiki untuk waktu yang lama.



Pembuatan versi juga membantu pengembangan tim karena setiap anggota tim tahu versi mana yang digunakan sebelum memperbarui file package.json.



Dalam semua kasus ini, versi membantu, dalam hal ini, npmmengikuti standar yang diterima.



Menjalankan tugas

package.jsonmendukung format untuk menentukan perintah yang akan dieksekusi di terminal dengan npm run <task-name>.



Sebagai contoh: 



{
    "scripts": {
        "start-dev": "node lib/server-development",
        "start": "node lib/server-production"
    },
}


Ini adalah praktik umum untuk menggunakan kemampuan ini untuk menjalankan Webpack: 

{
    "scripts": {
        "watch": "webpack --watch --progress --colors --config webpack.conf.js",
        "dev": "webpack --progress --colors --config webpack.conf.js",
        "prod": "NODE_ENV=production webpack -p --config webpack.conf.js"
    },
}


Ini memungkinkan, alih-alih serangkaian perintah panjang yang mudah dilupakan atau yang mudah dibuat kesalahan, untuk melakukan ini: 



npm run watch 
npm run dev 
npm run prod




Di mana npm menginstal paket?

Saat menginstal paket menggunakan, npmAnda dapat memilih antara dua jenis instalasi:



  • lokal
  • global


Secara default, ketika Anda memasukkan npm installmisalnya: 



npm install lodash


paket diinstal ke folder node_modulesdi direktori saat ini.



Setelah instalasi npmmenambahkan catatan lodashke bagian dependenciesfile package.jsondi direktori saat ini.



Untuk instalasi global, gunakan bendera -g: 



npm install -g lodash


Dalam instalasi global, paket diinstal bukan di direktori saat ini, tetapi di global.



Tapi dimana tepatnya?



Untuk menentukan ini, Anda perlu menjalankan perintah npm root -g.



Di macOS atau Linux, direktori ini bisa /usr/local/lib/node_modules. Di Windows - C:\Users\YOU\AppData\Roaming\npm\node_modules. Direktori ini mungkin berbeda



ketika digunakan nvmuntuk versi Node.js.



Bagaimana cara menggunakan paket yang diinstal?

Cara menggunakan node_modulespaket yang dipasang di folder atau secara global.



Katakanlah Anda menginstal lodashpustaka pembantu JavaScript populer npm install lodash.



Perintah ini akan dipasang lodashke direktori lokal node_modules.



Untuk menggunakan program ini, Anda perlu mengimpor paket menggunakan require: 



const _ = require('lodash')


Bagaimana jika paket dapat dieksekusi (file)?



Dalam hal ini, file yang dapat dieksekusi akan ditempatkan di direktori node_modules/.bin/.



Ini dapat dengan mudah diperagakan menggunakan pustaka cowsay .



Paket ini menyediakan program baris perintah, ketika dieksekusi, sapi (dan hewan lainnya) "berbicara" sesuatu.



Saat memasang paket melalui npm install cowsay, paket itu sendiri dan beberapa dependensinya akan diinstal:







Folder .bindisembunyikan dan berisi tautan simbolis ke cowsay data biner:







Bagaimana cara menjalankannya?



Anda tentu saja dapat mengetik ./node_modules/.bin/cowsaydan itu harus bekerja, tetapi npx yang disertakan dengan npm (karena 5.2) adalah pilihan terbaik. Anda lakukan sajanpx cowsaydan npx akan mencari file secara otomatis:





Sapi itu berkata "bawa aku keluar dari sini."



Paket.json manual

Saat bekerja dengan JavaScript, saat berinteraksi dengan proyek JavaScript, Node.js, atau aplikasi front-end, Anda mungkin akan menjumpai a package.json.



Apa itu? Apa yang harus Anda ketahui tentang dia? Dan apa yang dapat Anda lakukan dengannya?



package.jsonAdalah semacam manifesto proyek. Dia dapat melakukan banyak hal yang sama sekali tidak berhubungan satu sama lain. Misalnya, itu bisa menjadi file utama untuk pengaturan alat yang digunakan. Ini juga menyimpan nama dan versi semua paket yang diinstal (informasi ini digunakan npmdan yarn).



Struktur file

Ini sebuah contoh package.json: 



{}


Seperti yang Anda lihat, itu kosong. Tidak package.jsonada persyaratan untuk konten . Satu-satunya persyaratan adalah formatnya (JSON), jika tidak, program tidak akan dapat mengaksesnya.



Jika Anda membuat paket Node.js yang ingin Anda bagikan npm, situasinya berubah secara dramatis dan Anda perlu menambahkan properti untuk membantu orang lain menggunakan paket tersebut. Kami akan melihat ini nanti.



Ini contoh lain package.json: 



"name": "test-project"


Di sini kita telah mendefinisikan nama paket atau aplikasi yang terletak di direktori yang sama dengan package.json.



Berikut adalah contoh yang lebih kompleks yang package.jsondipinjam dari aplikasi Vue.js: 



{
  "name": "test-project",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "main": "src/main.js",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src test/unit",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^21.0.2",
    "babel-loader": "^7.1.1",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-airbnb-base": "^11.3.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-import-resolver-webpack": "^0.8.3",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^22.0.4",
    "jest-serializer-vue": "^0.3.0",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-jest": "^1.0.2",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": ["> 1%", "last 2 versions", "not ie <= 8"]
}


Ada banyak hal di sini:



  • name - nama aplikasi / paket
  • version - versi aplikasi / paket
  • description - deskripsi singkat tentang aplikasi / paket
  • main - file utama (titik masuk) aplikasi
  • private- nilai truemencegah publikasi aplikasi secara tidak disengajanpm
  • scripts - satu set skrip (perintah) yang dapat dijalankan (dieksekusi)
  • dependencies - Ketergantungan proyek
  • devDependencies - Ketergantungan proyek hanya digunakan selama pengembangan
  • engines - versi aplikasi / paket sedang berjalan
  • browserlist - browser yang didukung (dan versinya)


Semua properti ini digunakan npm.



Properti

Di bagian ini, kita akan berbicara tentang beberapa properti yang dapat Anda gunakan. Kami akan menggunakan istilah "paket", tetapi sebagian besar dari apa yang telah dikatakan juga berlaku untuk aplikasi.



Sebagian besar properti diperlukan untuk menerbitkan paket npm, beberapa berinteraksi dengan paket.



Nama (nama)

Menentukan nama paket.



Sebagai contoh: 



"name": "test-project"


Nama tidak boleh melebihi 214 karakter, tidak boleh mengandung spasi, dan hanya boleh terdiri dari huruf kecil (huruf kecil), tanda hubung (-), dan garis bawah (_).



Ini karena npmURL ditetapkan untuk paket ketika itu diterbitkan berdasarkan namanya.



Jika paket dipublikasikan di GitHub, adalah praktik yang baik untuk menautkan ke repositori.



Penulis

Identifikasi pembuat paket.



Sebagai contoh: 



{
    "author": "Joe <joe@whatever.com> (https://whatever.com)"
}


atau seperti ini: 



{
  "author": {
    "name": "Joe",
    "email": "joe@whatever.com",
    "url": "https://whatever.com"
  }
}


Kontributor

Menentukan satu atau lebih kontributor pada paket. Properti ini adalah serangkaian string.



Sebagai contoh: 



{
  "contributors": ["Joe <joe@whatever.com> (https://whatever.com)"]
}


atau seperti ini: 



{
  "contributors": [
    {
      "name": "Joe",
      "email": "joe@whatever.com",
      "url": "https://whatever.com"
    }
  ]
}


Kesalahan

Menentukan tautan ke pelacak masalah, biasanya pelacak masalah di GitHub.



Sebagai contoh: 



{
  "bugs": "https://github.com/whatever/package/issues"
}


Beranda

Menentukan alamat beranda.



Sebagai contoh: 



{
  "homepage": "https://whatever.com/package"
}


Versi: kapan

Menentukan versi paket saat ini.



Sebagai contoh: 



"version": "1.0.0"


Properti ini mengikuti standar versi semantik. Ini berarti harus selalu terdiri dari tiga angka yang dipisahkan oleh titik x.x.x.



Angka pertama adalah versi utama, yang kedua adalah versi minor, yang ketiga adalah tambalan.



Setiap angka memiliki arti khusus: pembaruan untuk memperbaiki bug adalah tambalan, rilis perubahan yang kompatibel mundur adalah rilis kecil, dan rilis utama mungkin berarti perubahan yang tidak kompatibel dengan versi sebelumnya.



Lisensi

Menentukan lisensi untuk paket tersebut.



Sebagai contoh: 



"license": "MIT"


Kata kunci

Properti ini adalah serangkaian kata kunci yang terkait dengan paket.



Sebagai contoh: 



"keywords": [
  "email",
  "machine learning",
  "ai"
]


Mereka membantu orang menemukan paket.



Deskripsi

Menentukan deskripsi singkat untuk paket.



Sebagai contoh: 



"description": "A package to work with strings"


Saat menerbitkan paket ke npmproperti tertentu, itu membantu orang memahami untuk apa itu.



Gudang

Menentukan di mana kode sumber untuk paket berada.



Sebagai contoh: 



"repository": "github:whatever/testing",


Perhatikan awalannya github. Ada layanan serupa lainnya: 



"repository": "gitlab:whatever/testing",



"repository": "bitbucket:whatever/testing",


Anda juga dapat menentukan sistem kontrol versi: 



"repository": {
  "type": "git",
  "url": "https://github.com/whatever/testing.git"
}


Anda dapat menentukan beberapa sistem kontrol versi: 



"repository": {
  "type": "svn",
  "url": "..."
}


utama

Menentukan file utama (titik masuk) untuk paket.



Saat mengimpor paket ke dalam aplikasi, dalam file ini aplikasi akan mencari modul yang diekspor.



Sebagai contoh: 



"main": "src/main.js"


pribadi

Menetapkan properti ini ke nilai truemencegah paket agar tidak dipublikasikan secara tidak sengaja npm.



Sebagai contoh: 



"private": true


skrip

Menentukan daftar perintah (skrip) yang dapat dieksekusi (dijalankan).



Sebagai contoh: 



"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "unit": "jest --config test/unit/jest.conf.js --coverage",
  "test": "npm run unit",
  "lint": "eslint --ext .js,.vue src test/unit",
  "build": "node build/build.js"
}


Skrip ini adalah aplikasi baris perintah. Anda dapat menjalankannya dengan npm run XXXXatau yarn run XXXX, di mana XXXXnama perintah. Sebagai contoh: npm run dev.



Nama apa pun dapat digunakan sebagai nama perintah, skrip akan melakukan apa pun yang Anda tentukan di dalamnya.



Ketergantungan

Menentukan daftar dependensi paket.



Saat memasang paket menggunakan npm atau benang: 



npm install <PACKAGENAME>
yarn add <PACKAGENAME>


catatan untuk paket ini akan secara otomatis ditambahkan ke properti yang bersangkutan.



Sebagai contoh: 



"dependencies": {
  "vue": "^2.5.2"
}


ketergantungan

Menentukan daftar dependensi untuk tujuan pengembangan.



Mereka berbeda dari dependencies, karena mereka hanya diinstal pada komputer pengembang dan tidak masuk ke produksi.



Saat memasang paket menggunakan npm atau benang: 



npm install --save-dev <PACKAGENAME>
yarn add --save-dev <PACKAGENAME>


catatan tentang itu secara otomatis ditambahkan ke properti yang dipertimbangkan.



Sebagai contoh: 



"devDependencies": {
  "autoprefixer": "^7.1.2",
  "babel-core": "^6.22.1"
}


mesin

Menentukan versi Node.js atau alat lain yang dijalankan oleh paket / aplikasi.



Sebagai contoh: 



"engines": {
  "node": ">= 6.0.0",
  "npm": ">= 3.0.0",
  "yarn": "^0.13.0"
}


daftar browser

Menentukan daftar browser yang didukung (dan versinya). Informasi ini digunakan oleh Babel, Autoprefixer dan alat-alat lain untuk membuat polyfill dan memastikan kompatibilitas dengan browser yang ditentukan.



Sebagai contoh: 



"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
]


Pengaturan ini berarti Anda ingin mendukung dua versi terbaru dari semua browser yang digunakan lebih dari 1% orang berdasarkan statistik CanIUse , dengan pengecualian untuk IE8 dan versi yang lebih lama.



Sifat khusus

package.jsondapat berisi properti khusus untuk alat-alat seperti Babel, ESLint, dll.



Masing-masing alat ini memiliki sifatnya sendiri, misalnya eslintConfig, babeldan sebagainya. Untuk detail tentang properti khusus, lihat dokumentasi yang sesuai.



Versi paket

Pada contoh di atas, Anda mungkin memperhatikan entri seperti ini: ~3.0.0, ^0.13.0. Apa yang mereka maksud? Dan penentu versi apa lagi yang bisa saya gunakan?



Penentu ini digunakan untuk menentukan kondisi pembaruan.



Aturannya adalah sebagai berikut:



  • ~- tulis ~0.13.0berarti bahwa hanya pembaruan tambalan yang diizinkan, mis. rilis 0.13.1valid, tetapi rilis 0.14.0tidak
  • ^- Write ^0.13.0berarti tambalan dan pembaruan kecil diizinkan
  • *- catatan *berarti bahwa setiap pembaruan diizinkan
  • > - semua versi baru diizinkan
  • >= - versi yang sama atau lebih baru diizinkan
  • <= - Versi serupa atau lebih lama dapat diterima
  • < - semua versi lama diizinkan


Berikut adalah beberapa aturan lagi:



  • tidak ada karakter utama - hanya versi yang ditentukan yang diizinkan
  • latest - hanya versi terbaru yang diizinkan


Karakter ini dapat dikombinasikan dalam berbagai cara, misalnya: 1.0.0 || >=1.1.0 <1.2.0.



Terima kasih atas perhatian Anda.



Bersambung…


More articles:


All Articles