Geekly articles weekly

Trik 13 npm untuk menghemat waktu

Setiap hari, jutaan pengembang, saat membuat aplikasi JavaScript mereka, beralih ke npm (atau ke Benang). Menjalankan perintah seperti npm init atau npx create-react-app telah menjadi cara yang biasa untuk mulai bekerja di hampir semua proyek JavaScript. Ini bisa berupa server, klien, atau bahkan aplikasi desktop.

Tetapi utilitas npm tidak hanya mampu menginisialisasi proyek atau menginstal paket. Penulis materi, terjemahan yang kami terbitkan hari ini, ingin berbicara tentang trik 13 npm yang akan memungkinkan Anda untuk memeras segala yang mungkin dari sistem ini. Di sini kita akan mempertimbangkan berbagai teknik ukuran - dari penggunaan cara pintas untuk menyesuaikan perilaku npm init .



Banyak programmer menggunakan npm setiap hari. Ini berarti bahwa dalam jangka panjang, bahkan penghematan waktu yang kecil dapat mengubah sesuatu menjadi lebih baik. Materi ini terutama ditujukan untuk pengembang pemula dan pengembang tingkat menengah. Namun, bahkan jika Anda seorang profesional, penulis materi berharap bahwa Anda dapat menemukan beberapa hal menarik di sini yang belum pernah Anda temui sebelumnya.

Jika Anda benar-benar tidak terbiasa dengan npm - perlu diketahui bahwa program yang menarik bagi kami diinstal dengan Node.js. Jika Anda bekerja pada Windows, Anda disarankan menginstal Git Bash untuk mereproduksi apa yang sedang dibahas di sini.

1. Opsi singkat untuk merekam perintah dasar


Mari kita mulai dengan dasar-dasarnya. Dengan menghabiskan sedikit waktu menjelajahi versi singkat dari perintah npm yang paling umum, Anda akan menghemat banyak waktu di masa depan.

  • Instal paket. Opsi normal: npm install . Pintasan: npm i .
  • Menjalankan tes. Opsi normal: npm test . Pintasan: npm t .
  • Telepon bantuan Opsi umum: npm --help . Pintasan: npm -h .
  • Bendera pengaturan global. Opsi umum: --global . Pintasan: -g .
  • Paket pemasangan bendera sebagai ketergantungan pengembangan. Opsi yang biasa adalah --save-dev . Pintasan: -D .
  • npm init awal npm init . Opsi yang biasa adalah npm init --yes atau npm init --force . Pintasan: npm init -y atau npm init -f .

Sekarang Anda tidak perlu menggunakan flag --save atau -S untuk menyimpan paket. Paket disimpan secara default. Dan untuk menginstal paket tanpa menyimpannya, Anda dapat menggunakan --no-save .

▍Pilihan perekaman pendek untuk perintah yang kurang umum


Berikut adalah beberapa singkatan yang lebih berguna, yang, bagaimanapun, tidak digunakan seluas yang kami tinjau.

  • Menyimpan paket sebagai ketergantungan opsional. Opsi yang biasa: --save-optional . Pintasan: -O .
  • Menyimpan informasi tentang versi persis paket. Opsi yang biasa adalah --save-exact . Pintasan: -E .

Menggunakan perintah npm install dengan npm install --save-bundle , atau -B bundledDependencies menyebabkan entri dalam bundel yang diinstal muncul di package.json , di bagian bundledDependencies . Paket-paket ini akan dikemas dengan proyek setelah publikasi. Untuk membuat file tarball yang berisi file proyek dan paket yang terdaftar di bundledDependencies , Anda dapat menggunakan perintah npm pack .

▍ Singkatan untuk direktori root


Biasanya, simbol titik ( . ) Digunakan untuk merepresentasikan direktori root dari suatu aplikasi, atau (tergantung pada konteksnya) untuk mewakili titik masuk ke suatu aplikasi. Dalam npm, ini adalah apa yang ditetapkan sebagai nilai properti main dalam file package.json :

 {  "main": "index.js" }

Steno ini dapat digunakan, misalnya, dengan perintah seperti npx create-react-app . Jadi, alih-alih menjalankan perintah ini dalam bentuk npx create-react-app my-app (yang akan mengarah pada pembuatan folder my-app ), Anda dapat menjalankan perintah ini seperti ini: npx create-react-app . (perhatikan titik yang datang setelah perintah). Ini akan memungkinkan Anda untuk membuat proyek template aplikasi Bereaksi di folder di mana Anda berada saat perintah dijalankan.

2. Menetapkan nilai default untuk npm init


Dengan terus-menerus menjalankan perintah npm init untuk membuat proyek baru, Anda kemungkinan besar akan menemukan bahwa Anda memasukkan data yang sama berulang-ulang sebagai respons terhadap pertanyaan sistem. Misalnya - kemungkinan Anda adalah penulis sebagian besar proyek yang Anda buat. Untuk menghemat waktu dalam memasukkan data yang sama, Anda dapat menetapkan nilai default Anda sendiri untuk bidang yang sesuai:

 npm config set init.author.name "Joe Bloggs" npm config set init.author.email "joebloggs@gmail.com" npm config set init.author.url  "joebloggs.com" npm config set init.license   "MIT"

Untuk memverifikasi kebenaran menambahkan informasi tersebut ke sistem, masukkan perintah npm config edit . Ini akan membuka file konfigurasi di editor sistem. Jika Anda ingin mengedit parameter global npm, gunakan perintah npm config edit -g .

Untuk kembali ke pengaturan default, Anda dapat menggunakan skrip berikut. Baris pertama menghapus data konfigurasi dari file, dan yang kedua mengisinya dengan nilai default.

 echo "" > $(npm config get userconfig) npm config edit

Skrip di atas mengatur ulang nilai default untuk pengguna. Skrip berikut ini akan menyetel ulang default global:

 echo "" > $(npm config get globalconfig) npm config --global edit

3. Skrip lintas platform


Kode apa pun yang dijalankan pada baris perintah dapat mengalami masalah kompatibilitas. Ini terutama berlaku untuk ketidakcocokan antara sistem berbasis Windows dan Unix (ini termasuk Mac dan Linux). Ini bukan masalah jika Anda dan hanya Anda yang mengerjakan proyek tertentu. Tetapi dalam banyak kasus, kompatibilitas skrip lintas platform sangat penting. Sebagai contoh, bekerja secara independen dari sistem operasi adalah nilai tambah yang besar untuk proyek open source, pelatihan atau demonstrasi.

Untungnya, menyelesaikan masalah kompatibilitas skrip tidak terlalu sulit. Kami memiliki beberapa opsi. Namun, di sini saya ingin berbicara tentang salah satunya, tentang penggunaan yang mana saya mendapatkan hasil terbaik. Ini adalah paket lintas-env . Itu harus diinstal sebagai dependensi pengembangan menggunakan perintah npm i -D cross-env . Maka Anda perlu meletakkan cross-env di depan setiap variabel lingkungan. Misalnya, mungkin terlihat seperti ini:

 {  "scripts": {    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js" }

Saya menemukan bahwa paket cross-env adalah alat yang paling nyaman untuk mencapai kompatibilitas skrip lintas platform. Tetapi akan berguna bagi Anda untuk melihat dua alat populer berikut yang dapat membantu dalam memecahkan masalah ini:

  • Paket Rimraf . Itu, untuk menjalankan skrip lintas-platform, dapat diinstal secara global.
  • Paket ShellJS . Ini adalah implementasi Node.js portabel dari shell perintah Unix.

4. Eksekusi skrip paralel


Untuk mengatur eksekusi berurutan dari perintah di shell Linux, && construct digunakan. Bagaimana dengan menjalankan skrip paralel? Untuk mencapai ini, Anda dapat memilih paket npm yang sesuai. Paket yang paling populer dari jenis ini adalah bersamaan dan npm-run-all . Di sini kami mendemonstrasikan penggunaan paket secara bersamaan.

Pertama, paket yang dipilih harus diinstal sebagai dependensi pengembangan: npm i -D concurrently . Kemudian di package.json Anda dapat menggunakan konstruksi dari formulir berikut:

 {  "start": "concurrently \"command1 arg\" \"command2 arg\"" }

5. Menjalankan skrip yang terletak di berbagai direktori


Terkadang Anda menemukan aplikasi yang memiliki beberapa file package.json terletak di direktori yang berbeda. Akan lebih mudah, misalnya, untuk menjalankan skrip yang dideklarasikan di dalamnya, berada di direktori root proyek. Ini jauh lebih baik daripada harus melakukan perjalanan ke folder yang berbeda setiap kali Anda perlu menjalankan skrip. Untuk melakukan ini, Anda dapat menggunakan dua pendekatan berikut.

Untuk memulai, Anda dapat menggunakan cd untuk secara otomatis menavigasi ke direktori yang diinginkan. Mungkin terlihat seperti ini:

 cd folder && npm start && cd ..

Namun masalah ini bisa diselesaikan dengan cara yang lebih menarik. Terdiri dari menggunakan flag --prefix , yang dengannya Anda dapat menentukan path:

 npm start --prefix path/to/your/folder

Berikut ini adalah contoh penerapan solusi ini dari aplikasi nyata. Di sini kita perlu menjalankan npm start untuk bagian klien dan server proyek. Kode mereka, masing-masing, terletak di folder client dan server .

 "start": "concurrently \"(npm start --prefix client)\" \"(npm start --prefix server)\"",

6. Menunda peluncuran skrip hingga sumber daya tersedia


Ketika mengembangkan aplikasi tumpukan penuh, sering kali perlu untuk menjalankan bagian klien dan server dari aplikasi tersebut. Paket tunggu memungkinkan Anda untuk menyinkronkan pelaksanaan proses tertentu. Dalam kasus kami, perlu bahwa sebelum memulai bagian klien dari aplikasi, port tertentu harus tersedia.

Misalnya, ada skrip dev yang digunakan dalam aplikasi Elektron yang antarmuka ditulis menggunakan React. Script, menggunakan concurrently , menjalankan lapisan presentasi aplikasi dan jendela Elektron secara paralel. Tetapi menggunakan wait-on Anda dapat membuat jendela Electron terbuka hanya ketika layer presentasi Bereaksi siap digunakan dan tersedia di http://localhost:3000 . Seperti apa tampilan wait-on :

 "dev": "concurrently \"cross-env BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"",

Selain itu, perilaku standar proyek Bereaksi adalah membuka jendela browser secara otomatis. Jika menggunakan Bereaksi dengan Elektron, ini tidak perlu. Ini dapat BROWSER=none menggunakan BROWSER=none variabel lingkungan, sebelum itu, demi kompatibilitas lintas platform dari solusi, ada perintah cross-env .

7. Mendaftar dan bekerja dengan skrip yang tersedia


Untuk membuat daftar skrip yang tersedia di package.json , cukup buka direktori root proyek dan jalankan perintah npm run di terminal.

Tetapi ada cara yang bahkan lebih mudah untuk membuat daftar skrip. Saat menggunakannya, skrip yang diinginkan dapat langsung dipilih dari daftar dan jalankan. Untuk menggunakan cara ini bekerja dengan skrip, kita perlu menginstal modul ntl (Npm Task List) secara global:

 npm i -g ntl

Kemudian di folder proyek Anda perlu menjalankan perintah ntl . Ini akan menampilkan daftar skrip yang tersedia dan akan memberi Anda kesempatan untuk memilih skrip untuk dijalankan. Ini tampilannya.


Menggunakan perintah ntl

Fitur ini bisa sangat berguna jika Anda tidak tahu persis skrip apa yang ada dalam proyek. Ini juga baik dalam kasus di mana programmer ingin mengganti input dari perintah panjang untuk menjalankan skrip dengan input dari perintah pendek dan penekanan cepat dari beberapa tombol lagi pada keyboard.

8. Menjalankan pra-skrip dan post-skrip


Anda mungkin terbiasa dengan skrip postbuild dan postbuild yang memungkinkan Anda untuk menjalankan beberapa kode sebelum dan sesudah menjalankan skrip build . Skrip pra dan pasca dapat didefinisikan untuk skrip lainnya. Termasuk mereka yang uraiannya ditambahkan ke p ackage.json oleh programmer.

Ini tidak hanya memungkinkan Anda untuk membuat kode lebih bersih, tetapi juga membantu untuk menjalankan skrip pra dan pasca secara terpisah.

9. Kontrol versi aplikasi


Alih-alih mengubah versi aplikasi secara manual, programmer dapat menggunakan perintah npm khusus. Untuk meningkatkan bagian yang sesuai dari nomor versi aplikasi, Anda dapat menggunakan perintah npm version diikuti oleh major , minor atau patch :

 // 1.0.0 npm version patch // 1.0.1 npm version minor // 1.1.0 npm version major // 2.0.0

Bergantung pada seberapa sering Anda memperbarui aplikasi, Anda dapat menghemat waktu dengan secara otomatis menambah nomor versi setiap kali Anda menggunakan versi baru aplikasi. Misalnya, seperti ini:

 {  "predeploy": "npm version patch" }

10. Mengedit package.json dari baris perintah


File package.json adalah file json biasa, sehingga dapat diedit langsung dari baris perintah menggunakan utilitas json . Ini membuka kemungkinan baru dalam situasi di mana Anda perlu memodifikasi package.json , memungkinkan Anda untuk membuat versi perintah yang dipersingkat. Instal paket json secara global:

 npm install -g json

Kemudian utilitas json dapat digunakan untuk mengedit file dengan cepat menggunakan -I . Misalnya, untuk menambahkan skrip foo baru dengan bar nilai ke file, Anda dapat menggunakan perintah berikut:

 json -I -f package.json -e 'this.scripts.foo="bar"'

Di bagian selanjutnya, Anda akan melihat contoh yang lebih praktis menggunakan utilitas json .

11. Otomatisasi pengaturan dan pembukaan repositori


Jika ada entri "repository" di file package.json Anda, ini berarti Anda dapat membuka halaman repositori di browser yang digunakan oleh sistem secara default. Untuk melakukan ini, gunakan perintah npm repo .

Jika proyek Anda sudah terhubung ke repositori jarak jauh dan Anda telah menginstal utilitas baris perintah git , ini berarti Anda bisa mengetahui alamat repositori Anda menggunakan perintah berikut:

 git config --get remote.origin.url

Tapi itu belum semuanya. Jika, sesuai dengan tip sebelumnya, Anda menginstal utilitas json , maka Anda dapat menggunakan skrip berikut untuk secara otomatis menambahkan informasi repositori yang benar ke package.json :

 json -I -f package.json -e "this.repository=\"$(git config --get remote.origin.url)\""

12. Membuat skrip Anda sendiri untuk mengontrol perintah npm init


Sekarang mari kita bicara tentang menyelesaikan tugas yang lebih besar. Yaitu, kami akan mengembangkan skrip kami sendiri yang mengontrol operasi perintah npm init , yang menerima URL repositori GitHub dan secara otomatis mengirimkan komit pertama ke sana. Di sini kita berbicara tentang cara membuat skrip seperti itu. Dan di bagian selanjutnya, yang akan menjadi tip terakhir kami, kami akan berbicara tentang bekerja dengan git .

Anda dapat menyesuaikan perilaku perintah npm init menggunakan file .npm-init.js . Mari kita buat file seperti itu di direktori home pengguna saat ini (pada Windows biasanya C:/Users/<username> , dan pada Mac itu adalah /Users/<username> ). Setelah itu, jalankan perintah berikut yang memberi tahu npm di mana tepatnya file ini berada:

 npm config set init-module ~\.npm-init.js

Sebelum melakukan integrasi dengan c git , mari kita lihat contoh sederhana dari file .npm-init.js , yang mereproduksi pertanyaan yang diajukan sistem kepada pengguna saat menggunakan perintah npm init tanpa pengaturan tambahan:

 module.exports = {  name: prompt('package name', basename || package.name),  version: prompt('version', '0.0.0'),  decription: prompt('description', ''),   main: prompt('entry point', 'index.js'),  repository: prompt('git repository', ''),  keywords: prompt(function (s) { return s.split(/\s+/) }),  author: prompt('author', 'Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)'),  license: prompt('license', 'ISC') }

Setiap pertanyaan didasarkan pada templat berikut:

 nameInPackage: prompt('nameInPrompt', 'defaultValue')

Untuk menunjukkan nilai tertentu dan tidak mengajukan pertanyaan kepada pengguna, cukup hapus metode prompt .

Jika Anda ingin kembali ke pengaturan standar npm init , cukup hapus file .npm-init.js .

13. Mengirim komit pertama ke repositori GitHub menggunakan npm init


Untuk menjalankan perintah git dalam file .npm-init.js kita perlu menemukan cara untuk bekerja dengan baris perintah. Anda dapat menggunakan modul child_process untuk child_process . Kami menyambungkannya di bagian atas file, dan karena kami hanya membutuhkan fungsi execSync , kami hanya mengimpornya, menggunakan penghancuran:

 const { execSync } = require('child_process');

Selain itu, kami akan membuat fungsi pembantu yang menampilkan hasil fungsi kami di konsol:

 function run(func) {  console.log(execSync(func).toString()) }

Dan akhirnya, mari kita buat blok prompt yang sesuai untuk menangani URL repositori GitHub. Jika skrip memiliki URL, kami akan membuat file README.md dan mengirimkan komit pertama ke repositori.

Jadi, salah satu elemen objek module.exports dari file .npm-init.js harus berupa kode berikut:

 repository: prompt('github repository url', '', function (url) {  if (url) {    run('touch README.md');    run('git init');    run('git add README.md');    run('git commit -m "first commit"');    run(`git remote add origin ${url}`);    run('git push -u origin master');   return url; })

Berikut adalah bagaimana kode lengkap untuk file .npm-init.js akan terlihat setelah penambahan ini:

 const { execSync } = require('child_process'); function run(func) {  console.log(execSync(func).toString()) } module.exports = {  name: prompt('package name', basename || package.name),  version: prompt('version', '0.0.0'),  decription: prompt('description', ''),  main: prompt('entry point', 'index.js'),  keywords: prompt(function (s) { return s.split(/\s+/) }),  author: prompt('author', 'Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)'),  license: prompt('license', 'ISC'),  repository: prompt('github repository url', '', function (url) {    if (url) {      run('touch README.md');      run('git init');      run('git add README.md');      run('git commit -m "first commit"');      run(`git remote add origin ${url}`);      run('git push -u origin master');       return url;  }), }

Ini adalah file package.json yang dibuat oleh sistem menggunakan .npm-init.js :

 {  "name": "Custom npm init",  "version": "0.0.0",  "decription": "A test project, to demonstrate a custom npm init script.",  "main": "index.js",  "keywords": [],  "author": "Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)",  "license": "ISC",  "repository": {    "type": "git",    "url": "git+https://github.com/JoeBloggs/custom.git"  },  "bugs": {    "url": "https://github.com/JoeBloggs/custom/issues"  },  "homepage": "https://github.com/JoeBloggs/custom#readme" }

Dengan mengatur proses inisialisasi proyek baru, Anda dapat melangkah lebih jauh. Misalnya, untuk memastikan bahwa saat membuat proyek, repositori baru untuknya akan dibuat.

Ringkasan


Saya harap materi ini telah membantu Anda melihat apa yang dapat Anda capai dengan npm. Saya ingin percaya bahwa Anda telah menemukan sesuatu di sini yang akan memungkinkan Anda bekerja lebih produktif - apakah kita berbicara tentang menggunakan versi perintah yang diperpendek, tentang skrip dari package.json , atau tentang pengaturan npm init agar sesuai dengan kebutuhan Anda.

Pembaca yang budiman! Apakah Anda mengotomatisasi kerja dengan npm?

Source: https://habr.com/ru/post/id458504/

More articles:


All Articles