Bab 8: Package Management dan Build Tools
8.1 NPM (Node Package Manager)
8.1.1 Dasar NPM
# Inisialisasi proyek baru
npm init
npm init -y # Skip questions with defaults
# Installing packages
npm install package-name
npm install package-name@version
npm install package-name --save-dev
npm install -g package-name
# Removing packages
npm uninstall package-name
# Updating packages
npm update
npm update package-name
# Running scripts
npm run script-name
8.1.2 Package.json
{
"name": "my-project",
"version": "1.0.0",
"description": "Project description",
"main": "index.js",
"scripts": {
"start": "node index.js",
"dev": "nodemon index.js",
"build": "webpack --mode production",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"express": "^4.17.1",
"react": "^17.0.2"
},
"devDependencies": {
"webpack": "^5.65.0",
"jest": "^27.4.5",
"eslint": "^8.5.0"
}
}
8.1.3 NPM Scripts
{
"scripts": {
"prebuild": "rimraf dist",
"build": "webpack",
"postbuild": "copyfiles -u 1 src/**/*.html dist",
"dev": "npm-run-all --parallel watch:*",
"watch:webpack": "webpack --watch",
"watch:sass": "sass --watch src/styles:dist/styles",
"test": "jest --coverage",
"test:watch": "jest --watch"
}
}
8.2 Yarn
8.2.1 Dasar Yarn
# Installing Yarn
npm install -g yarn
# Inisialisasi proyek
yarn init
# Installing packages
yarn add package-name
yarn add package-name@version
yarn add package-name --dev
yarn global add package-name
# Removing packages
yarn remove package-name
# Updating packages
yarn upgrade
yarn upgrade package-name
# Running scripts
yarn script-name
8.2.2 Yarn Workspaces
{
"private": true,
"workspaces": [
"packages/*"
],
"dependencies": {
"shared-lib": "1.0.0"
}
}
8.3 Webpack
8.3.1 Basic Configuration
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.[contenthash].js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
type: 'asset/resource'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};
8.3.2 Development Configuration
// webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
hot: true,
port: 3000,
historyApiFallback: true
}
});
8.4 Babel
8.4.1 Configuration
// babel.config.js
module.exports = {
presets: [
['@babel/preset-env', {
targets: {
node: 'current',
browsers: ['> 1%', 'last 2 versions']
}
}],
'@babel/preset-react'
],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-runtime'
]
};
8.4.2 Integration with Webpack
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
}
]
}
8.5 ESLint
8.5.1 Configuration
// .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:react/recommended'
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module'
},
rules: {
'indent': ['error', 4],
'linebreak-style': ['error', 'unix'],
'quotes': ['error', 'single'],
'semi': ['error', 'always']
}
};
8.6 Development vs Production Builds
8.6.1 Production Configuration
// webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = merge(common, {
mode: 'production',
optimization: {
minimizer: [
new TerserPlugin(),
new CssMinimizerPlugin()
],
splitChunks: {
chunks: 'all'
}
}
});
8.7 Module Bundlers
8.7.1 Rollup Configuration
// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'iife'
},
plugins: [
resolve(),
commonjs(),
babel({
exclude: 'node_modules/**'
}),
terser()
]
};
8.8 Task Runners
8.8.1 Gulp Configuration
// gulpfile.js
const { src, dest, watch, series, parallel } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const cssnano = require('gulp-cssnano');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
function styles() {
return src('src/styles/**/*.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(cssnano())
.pipe(dest('dist/css'));
}
function scripts() {
return src('src/js/**/*.js')
.pipe(babel())
.pipe(uglify())
.pipe(dest('dist/js'));
}
exports.default = series(parallel(styles, scripts));
exports.watch = function() {
watch('src/styles/**/*.scss', styles);
watch('src/js/**/*.js', scripts);
};
8.9 Praktik dan Latihan
8.9.1 Project Setup
# Project initialization
mkdir my-project && cd my-project
npm init -y
# Installing dependencies
npm install webpack webpack-cli --save-dev
npm install babel-loader @babel/core @babel/preset-env --save-dev
npm install eslint --save-dev
# Creating configuration files
touch webpack.config.js
touch .babelrc
touch .eslintrc.js
8.10 Best Practices
8.11 Ringkasan
Package managers (NPM, Yarn)
Build tools (Webpack, Rollup)
8.12 Latihan Akhir Bab
Setup complete development environment
Configure production build process
Create custom build scripts