Pengertian Dan Cara Penggunaan NPM, Babel, Webhook Dan Yarn
Apa itu NPM, Yarn, Babel, dan Webpack; dan bagaimana cara menggunakannya dengan benar?
Sebagian besar dari kita yang mulai membuat aplikasi web interaktif memulai dengan membuat situs web biasa menggunakan library seperti jQuery. Keempat teknologi ini adalah yang pertama kali Anda temui saat memulai petualangan. Menyiapkan proyek React bisa menjadi pengalaman yang menyakitkan.
Artikel ini mencoba untuk meringankan pengalaman menyakitkan ini dengan membawa Anda melalui teknologi ini satu per satu dan menjelaskan bagaimana mereka bekerja sama.
NPM dan Yarn
Kedua teknologi ini memecahkan masalah yang persis sama. Lebih khusus lagi, Yarn adalah superset dari NPM yang memecahkan banyak masalah NPM. Jadi untuk apa ini?
NPM adalah singkatan dari Node Package Manager. Itulah arti namanya. paket Manager untuk environtment berbasis Node. Itu melacak semua paket dan versinya dan memungkinkan pengembang dengan mudah memperbarui atau menghapus dependensi ini. Semua dependensi eksternal ini disimpan di dalam file bernama package.json. File awal dapat dengan mudah dibuat menggunakan CLI npm init (dengan asumsi NodeJS terinstal di sistem Anda). Saat Anda menggunakan NPM untuk menginstal paket, paket tersebut diunduh dari registri khusus. NPM memiliki banyak fitur, termasuk penerbitan. Jika Anda ingin tahu lebih banyak tentang NPM, periksa tautan di bagian bawah.
Setiap bahasa yang kami gunakan memiliki pengelola paket, baik resmi maupun pihak ketiga. PHP memiliki Composer, Python memiliki PIP/Pipenv, Java memiliki Gradle, dan seterusnya.
Sekarang mari kita bicara sebentar tentang Yarn. paket Manager yang menggunakan registri NPM sebagai backend. Yarn memiliki dua keunggulan utama dibandingkan NPM. Pertama, Yarn membuat file yarn.lock. File ini berisi versi dependensi yang tepat hingga digit terakhir. Selama instalasi, Yarn terlebih dahulu memeriksa file kunci versi, kemudian file package.json. NPM memiliki perintah shrinkwrap yang melakukan hal ini. Namun, Yarn akan secara otomatis membuat dan memperbarui file kuncinya saat dependensi diinstal/diperbarui. Kedua, Yarn sangat cepat. Saat menginstal dependensi proyek, NPM menginstal paket secara berurutan. Ini akan sangat menurunkan kinerja. Yarn memecahkan masalah ini dengan menginstal paket-paket ini secara paralel.
Anda sudah selesai dengan NPM dan Yarn.
Babel
Seperti bahasa lainnya, Javascript memiliki versi bernama ECMAScript (kependekan dari ES). Sebagian besar browser sekarang mendukung ES5. ES5 sulit untuk dikodekan, tetapi dulunya bagus. this tidak membaca dari dalam fungsi callback? ES6, versi baru Javascript juga dikenal sebagai ES2015 (spesifikasi bahasa diselesaikan pada Juni 2015), menjadikan Javascript hebat lagi. Jika Anda ingin belajar tentang ES6, lihat tautan di bagian akhir artikel ini. Untuk semua fitur hebat ES6, ada satu masalah besar. Sebagian besar browser tidak sepenuhnya mendukungnya. Saat itulah Babel berperan. Babel adalah transpiler JS yang mengubah kode JS baru menjadi kode lama. Ini adalah alat yang sangat fleksibel dalam hal transpiling. Anda dapat dengan mudah menambahkan preset seperti es2015, es2016, es2017, env. Biarkan Babel mengkompilasinya ke ES5.
Berikut ini contohnya — kode yang ditulis dalam ES6:
class Test {
calculatePowers() {
return [1,2,3].map(n => n ** 2);
}
}
Mengingat preset es2015, Babel mengubah kode ini sebagai berikut:
"use strict";var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }var Test = function () {
function Test() {
_classCallCheck(this, Test);
}_createClass(Test, [{
key: "calculatePowers",
value: function calculatePowers() {
return [1, 2, 3].map(function (n) {
return Math.pow(n, 2);
});
}
}]);return Test;
}();
Ini adalah contoh bagaimana Babel dapat digunakan untuk menulis kode yang bersih dan dapat dipelihara menggunakan spesifikasi JS terbaru tanpa harus mengkhawatirkan dukungan browser.
Artikel Terkait Lainnya :
webpack
Sekarang saya tahu apa itu Babel dan ES6+, saya ingin menggunakannya. Saya juga ingin menggunakan SASS untuk gaya dan PostCSS untuk awalan otomatis. Selain itu, saya ingin kode CSS dan Javascript diperkecil dan jelek. Webpack menyelesaikan semua masalah ini dengan satu file konfigurasi (bernama webpack.config.js) dan satu webpack perintah CLI.
Webpack adalah alat build modular dengan dua set fitur: loader dan plugin. Loader mengubah kode sumber modul. Misalnya, pemuat gaya menggunakan tag gaya untuk menambahkan CSS ke DOM. sass-loader mengkompilasi file SASS ke dalam CSS. babel-loader mengubah kode JS dengan preset. Plugin adalah inti dari Webpack. Mereka dapat melakukan hal-hal yang tidak dapat dilakukan loader. Misalnya, ada plugin bernama UglifyJS yang mengecilkan dan memperburuk keluaran webpack.
Menggunakan semua bersama-sama
Sekarang setelah Anda mengetahui konsep di balik ini, mari buat aplikasi Hello World sederhana menggunakan Babel, SASS, PostCSS, Webpack, Yarn, dan React. Aplikasi ini hanya menampilkan Hello World dari dalam komponen React. Saya tidak menyebutkan React, tetapi toolchain berikut biasanya digunakan di aplikasi React: Jadi saya memutuskan untuk menggunakan React untuk mendemonstrasikan contoh ini.
Pertama, mari pasang Yarn secara global. Jika Anda menginstal NodeJS di sistem Linux Anda, ketik:
sudo npm install -g yarn
Jika Anda menggunakan macOS dan menginstal NodeJS dan Homebrew, ketik:
brew install yarn
Sekarang setelah Yarn terinstal, mari beralih ke direktori kerja kita. Setelah Anda berada di direktori kerja Anda (milik saya adalah ~/example-react-app), ketikkan Yarn init --yes. Jika Anda memeriksa direktori, Anda akan melihat bahwa file package.json telah dibuat.
Saatnya menginstal semua dependensi. Anda perlu memutuskan apa yang dibutuhkan proyek Anda — Webpack, Babel, Babel JSX syntax, Babel Env Preset, SASS, PostCSS, dan semua kebutuhan loader webpack:
yarn add --dev webpack @babel/core babel-loader @babel/preset-env node-sass css-loader sass-loader style-loader postcss-loader autoprefixer
Pembaruan: Paket-paket dalam posting ini telah diperbarui untuk mencerminkan versi terbaru dari webpack, babel, dll. Prasetel ES2015 yang disebutkan di atas telah diganti dengan prasetel Env yang mengotomatiskan apa yang perlu diubah berdasarkan browser yang didukung. Selain itu, paket PostCSS dan autoprefixer telah ditambahkan di atas.
Anda juga membutuhkan React.
yarn add react react-dom
Anda mungkin bertanya mengapa saya menambahkan flag --dev ke dependensi webpack saya. Setelah menginstal keduanya, jika Anda memeriksa file package.json Anda, Anda akan melihat bahwa yang diinstal dengan flag --dev ada di array devDependencies dan yang tidak ada di array dependensi. Menginstal proyek ini dalam produksi hanya akan menginstal paket dalam larik dependensi.
Perhatikan bahwa memisahkan devDependencies dari dependensi hanya berguna untuk pengembang, karena tidak seperti proyek NodeJS di aplikasi front-end, semua dependensi diperlukan agar aplikasi berhasil dibangun. Memisahkan alat Anda ke dalam devDependencies memudahkan untuk memisahkan alat build (seperti Babel) dari dependensi aktual aplikasi Anda (seperti React).
Dengan dependensi terpasang, mari buat contoh aplikasi. Struktur aplikasi terlihat seperti ini:
src/
/index.jsx
/index.html
/components
/HelloWorld.jsx
/styles
/app.scss
/components
/hello-world.scss
Tambahkan kode berikut ke src/components/HelloWorld.jsx.
import React from 'react';const HelloWorld = () => (
<div className="hello-world">
<h1>Hello World</h1>
</div>
);export default HelloWorld;
Sertakan dan render komponen HelloWorld di src/index.jsx. Juga sertakan gaya sass.
import React from 'react';
import ReactDOM from 'react-dom';import HelloWorld from './components/HelloWorld';import './styles/app.scss';ReactDOM.render(
<HelloWorld />,
document.getElementById('app')
);
Sertakan komponen/hello-world.scss di src/styles/app.scss.
@import 'components/hello-world';
Di src/styles/components/hello-world.scss ubah warna wadah hello world menjadi merah.
.hello-world {
color: red;
}
src/index.html memuat file bundel.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example React App</title>
</head>
<body>
<div id="app"></div>
<script src="/output/bundle.js"></script>
</body>
</html>
Sekarang setelah kami menambahkan semua struktur aplikasi, kami perlu menyiapkan Webpack. Pertama, buat webpack.config.js di root direktori kerja Anda. Webpack membutuhkan titik masuk dan direktori keluaran. Titik masuknya adalah file src/index.jsx. Mari atur direktori output menjadi output dan nama file output bundle.js. Selain itu, file yang dimulai dengan .jsx tidak perlu menyertakan ekstensi saat diimpor.
Mari tambahkan dua kolom penting ke file konfigurasi webpack kita:
// This library allows us to combine paths easily
const path = require('path');module.exports = {
entry: path.resolve(__dirname, 'src', 'index.jsx'),
output: {
path: path.resolve(__dirname, 'output'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
}
};
Selanjutnya kita perlu menyiapkan loader. Untuk file yang diakhiri dengan ekstensi .jsx, gunakan babel-loader dengan env dan preset reaksi. Gunakan sass-loader, css-loader, postcss-loader, style-loader untuk file yang diakhiri dengan ekstensi .scss. Setelah menambahkan loader ini, webpack.config.js Anda akan terlihat seperti ini:
// This library allows us to combine paths easily
const path = require('path');module.exports = {
entry: path.resolve(__dirname, 'src', 'index.jsx'),
output: {
path: path.resolve(__dirname, 'output'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx/,
use: {
loader: 'babel-loader',
options: { presets: ['@babel/preset-react', '@babel/preset-env'] }
}
},
{
test: /\.scss/,
use: ['style-loader', 'css-loader', 'postcss-lodaer', 'sass-loader'] // Note that postcss loader must come before sass-loader
}
]
}
};
Kita juga perlu mengonfigurasi postcss untuk mengaktifkan awalan otomatis properti CSS yang diperlukan. Untuk itu, Anda perlu membuat file postcss.config.js di root proyek Anda dan menambahkan konten berikut:
module.exports = {
plugins: [require('autoprefixer')]
};
PostCSS mengimpor modul ini, yang pada gilirannya mengimpor modul autoprefixer yang dipasang sebelumnya. Sekarang ketika Anda membangun bundel Anda dengan webpack, itu akan secara otomatis mengawali properti CSS yang diperlukan.
Selanjutnya, kita perlu menjalankan webpack. Cara termudah untuk melakukannya adalah dengan menambahkannya ke package.json Anda. Tambahkan berikut ini ke root file JSON Anda:
scripts: {
"build": "webpack -p"
}
Flag -p adalah singkatan dari produksi dan memperkecil serta memperburuk kode tanpa harus menyertakan plugin dalam konfigurasi. Setelah menyimpan file, buka terminal dan ketik Yarn run build . Jika Anda memeriksa direktori keluaran sekarang, Anda akan melihat bahwa file bundle.js telah dibuat di dalamnya. Cara membaca file bundel yang dibuat berada di luar cakupan artikel ini, jadi saya akan menghilangkannya.
Webpack disiapkan dan file bundel dibuat. Sudah waktunya untuk membuat pengembangan lebih mudah. Pemuatan panas diperlukan untuk pengembangan yang lebih cepat. Solusi termudah dan terbaik adalah menggunakan Webpack Dev Server. Pertama, Anda perlu memperbarui konfigurasi webpack Anda. Tambahkan berikut ini ke root konfigurasi webpack Anda.
devServer: {
contentBase: './src',
publicPath: '/output'
}
Dua baris ini memberi tahu server dev webpack untuk membaca konten dari direktori src dan menyajikan aset di bawah jalur URL /output. Maka Anda harus pergi ke terminal dan menginstal server webpack dev
yarn add --dev webpack-dev-server
Setelah server dev webpack diinstal, mari tambahkan skrip lain ke package.json kita dan jalankan. Di bawah skrip, tambahkan:
"dev": "webpack-dev-server --hot --inline"
flag --hot berarti pemuatan panas dan --inline berarti tidak menampilkan bilah alat server webpack dev. Saya menyukainya, jadi saya mengaturnya seperti itu. Sekarang jalankan:
yarn run dev
Secara default, Webpack Dev Server berjalan pada port 8080. Buka browser Anda dan ketik http://localhost:8080 dan Anda sudah siap.
Kesimpulan
Tujuan artikel ini adalah untuk menjelaskan mengapa Anda memerlukan alat ini untuk membuat aplikasi web interaktif dengan cepat menggunakan React (atau kerangka kerja lainnya), dan bagaimana alat ini bekerja sama untuk membuat pengembangan yang cepat dan satu ukuran untuk semua. menjelaskan cara mencapai penerapan klik.
Penting untuk disebutkan bahwa Facebook telah menciptakan alat yang hebat untuk memulai aplikasi react tanpa memerlukan konfigurasi build: create-react-app Di bawah tenda, paket perdana ini juga mencakup penggunaan webpack dan babel.