Webpack 4 (4.29.6) Vanilla Javascript Starter Pack
Generator pozwala za pomocą jednej komendy npm wygenerować boilerplate aplikacji
ze skonfigurowanymi środowiskami dev, test, pros.
Idealny boilerplate do tworzenia prostych stron oraz aplikacji webowych w czystym JS. Narzędzie, pomimo iż z założenia przeznaczone głównie dla początkujących, może być śmiało wykorzystywane przez bardziej doświadczonych developerów, którzy nie mają czasu na ręczną konfigurację webpacka.
Instalacja:
Node 11.10+
npm i -g webpack-vanilla-js-starter
cd <projects>
create-js-app
> choose boilerplate
> name a project
cd my-app
npm install
Development
-
npm start- startuje środowisko dev na:http://localhost:8080 -
npm run build- buduje wersję produkcyjną
Konfiguracje
Porównanie
| webpack-onepage-js-starter | webpack-spa-js-starter (TBD) | |
|---|---|---|
| Hot Module Replacement | ||
| Dev Environment | webpack-dev-server | webpack-dev-server |
| Basic prod minification | ||
| CSS Preprocessor | Sass (scss) | Sass (scss) |
| Autoprefixer | ✅ | ✅ |
| Normalize.css | ||
| Html template | ✅ | |
| Write code in JS | ✅ | |
| Unit Tests | ||
| E2E Tests | ||
| Eslint | ||
| Prettier |
Webpack-onepage-js-starter
- minimalistyczny, idealny do tworzenia stron typu one page,
- kod (strukturę) strony można w całości pisać zarówno w plikach index.html bądź javascript,
- w razie potrzeby config można bardzo prosto rozbudować o wszelkie funkcjonalności dostępne w webpack-spa-js-starter,
Webpack-spa-js-starter (TBD)
- idealny do tworzenia aplikacji SPA,
- kod strony pisany w JS,
- skonfigurowane środowisko testowe,
- bardziej skupiony na web performance,
Struktura katalogów
|-- package.json
|-- config
|-- dist
|-- src
| |-- index.html
| |-- scripts
| | |-- index.js
| |
| |-- styles
| | |-- main.scss
| | |-- base
| | | |-- _base.scss
| | | |-- _typography.scss
| |
| |-- assets
|
// webpack-spa-js-starter has also:
|-- __e2e__
| |-- example.test.js
|
|-- src
| |-- scripts
| | |-- index.js
| | |-- index.test.js
|
|-- .eslintrc.json
|-- .prettierrc
Testy (TBD)
Webpack-spa-js-starter korzysta z następujących narzędzi:
- Jest https://github.com/facebook/jest
- DOM-Testing-Library https://github.com/kentcdodds/dom-testing-library
- Puppeteer https://github.com/GoogleChrome/puppeteer
- Jest-Pupeteer https://github.com/smooth-code/jest-puppeteer
- Pixelmatch https://github.com/mapbox/pixelmatch