> For the complete documentation index, see [llms.txt](https://triyono.gitbook.io/tutorial/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://triyono.gitbook.io/tutorial/java-script/bab-8-package-management-dan-build-tools.md).

# Bab 8: Package Management dan Build Tools

## Bab 8: Package Management dan Build Tools

### 8.1 NPM (Node Package Manager)

#### 8.1.1 Dasar NPM

```bash
# 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

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

```json
{
  "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

```bash
# 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

```json
{
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "dependencies": {
    "shared-lib": "1.0.0"
  }
}
```

### 8.3 Webpack

#### 8.3.1 Basic Configuration

```javascript
// 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

```javascript
// 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

```javascript
// 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

```javascript
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    cacheDirectory: true
                }
            }
        }
    ]
}
```

### 8.5 ESLint

#### 8.5.1 Configuration

```javascript
// .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

```javascript
// 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

```javascript
// 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

```javascript
// 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

```bash
# 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

* Dependency management
* Build optimization
* Code splitting
* Asset optimization
* Caching strategies

### 8.11 Ringkasan

* Package managers (NPM, Yarn)
* Build tools (Webpack, Rollup)
* Transpilers (Babel)
* Linters (ESLint)
* Task runners (Gulp)

### 8.12 Latihan Akhir Bab

1. Setup complete development environment
2. Configure production build process
3. Implement code splitting
4. Setup automated testing
5. Create custom build scripts