Narzędzia Świata: webpack-unused

Kilka miesięcy temu, nagrałem film o takim narzędziu, które pokazuje listę plików nieużywanych w projekcie opartym na Webpacku. Przyszła pora, aby opisać to narzędzie w serii “Narzędzia Świata”.

Webpack - a co to?

W erze zmieniających się co kilka tygodni narzędzi JavaScript-owych od kilku miesięcy pojawił się lider w kategorii budowania aplikacji.

Webpack to narzędzie, które buduje pliki “produkcyjne” na podstawie plików developerskich. Jego podstawowe cechy to:

• minifikacja kodu, tj. usuwanie komentarzy (w trybie produkcyjnym)
• obfuskacja zmiennych, tj. skracanie nazw do literowych (w trybie produkcyjnym)
• daje możliwość łatwej transpilacji kodu, np. z kody pisanego w TypeScript do prostego JavaScript-u w standardzie ECMAScript 5
• daje możliwość łatwej konfiguracji preprocesorów do CSS-ów.

Moje projekty

Jestem autorem kilku projektów pomocniczych:

• github.com/piecioshka/boilerplate-babel-webpack - jeśli chcesz zacząć kodować w ES2015 bez spędzania czasu na konfiguracji zerknij na ten projekt
• github.com/piecioshka/test-typescript-webpack - projekt, w którym skonfigurowałem Webpacka do tego, aby pisać aplikację w TypeScript
• github.com/piecioshka/test-flowtype-webpack - testowy projekt, w którym został skonfigurowany FlowType
• github.com/piecioshka/training-resolve-webpack-build-error - zagadka do rozwiązania

Nudny artykuł, zobacz film!

Jeśli nie chce Ci się czytać, ani testować nowego narzędzia, możesz poświęcić niecałe 4 minuty zobaczyć jak ja wykorzystuję “webpack-unused” w nowo stworzonym projekcie.

•

Jak działa webpack-unused?

Krok 1. Stworzenie projektu

Copy + paste

mkdir test-project
cd $_
mkdir src/
touch src/main.js
echo "console.log('main.js')" > src/main.js
touch src/unused.js
echo "console.log('unused.js')" > src/main.js

Krok 2. Budowanie projektu

Copy + paste

touch package.json
vi package.json

Zawartość pliku package.json:

{
    "name": "test-project",
    "scripts": {
        "build": "webpack"
    }
}

Krok 3. Konfiguracja Webpacka

Copy + paste

touch webpack.config.js
vi webpack.config.js

Zawartość pliku webpack.config.js:

module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "./bundle.js"
    }
};

Krok 4. Instalacja i uruchomienie Webpacka

Copy + paste

npm install --save-dev webpack
npm run build

Aplikacja powinna zostać pomyślnie zbudowana, tj. powinien powstać plik bundle.js w głównym katalogu.

Krok 5. Instalacja i uruchomienie webpacka-unused

Zainstaluj globalnie webpack-unused, ponieważ nie jest to narzędzie związane z żadnym projektem, więc nie ma argumentu, aby tego nie zrobić.

Copy + paste

npm install -g webpack-unused

Dodaj zadanie, które będzie budowało aplikację i uruchamiać dzisiejsze narzędzie:

Copy + paste

vi package.json

{
    "name": "test-project",
    "scripts": {
        "build": "webpack"
        "build:display-unused-files": "webpack --json | webpack-unused"
    }
}

Uruchom polecenie, które zbuduje aplikację, a wynik z procesu budowania przekaże do omawianego narzędzia:

Copy + paste

npm run build:display-unused-files

Polecenie wyświetli listę plików, które nie są używane:

./src/unused.js