Sebastian N.

present my blog programming

Budowanie paczki produkcyjnej w JavaScript

2019-02-23 SeNServer-siding

Budowanie paczki produkcyjnej jest to ciekawe zagadnienia, jeżeli chcemy na hosta wrzucić zawartość wygnerowanego przez nas kodu, który ma tworzyć konkretną domenę. Wówczas możemy tworzyć to własnoręcznie.

unsplash.com

Paczka produkcyjna w JavaScirpt? co to jest?

Otóż jest to przetworzony kod aplikacji w formie akceptowanej przez hosting. Czyli mówiąc prosto tworzony jest folder public, który możemy umieścić, czyli deploy-ować. W tym folderze zawarte są wszelkie statyczne pliki, których wymaga host do zbudowania na browser-erze strony, którą otrzyma nasz klient.

  • W przypadku JS ciekawym freameworkiem do zadań specjalnych w serve-siding jest Node.js, więc jeżeli myślisz o tworzeniu paczek produkcyjnych zastanów się nad jego poznaniem! więcej na stronie https://nodejs.org/en/.
  • Ciekawym również rozwiązaniem może być freamework Gatsby.js, z którego osobiście korzystam na tym blogu, więcej na stronie: https://www.gatsbyjs.org/. W skrócie jest to generator stron statycznych współgrający z React.js.

Często w consoli będziemy korzystali w przypadku Gatsby.js i Node.js z komend:

yarn or npx gatsby build
npm run build

Zawartą w pliku package.json w miejscu scripts, przykład poniżej:

    "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "deploy": "gatsby build --prefix-paths && gh-pages -d public",
    "build:gh": "npm run clean && npm run build:pp && gh-pages -d public",
    "devhost": "gatsby develop --host 192.168.0.112",
    "format": "prettier --write 'src/**/*.js'",
    "lint-errors": "eslint src/**/*.{js,jsx} --quiet",
    "lint": "eslint src/**/*.{js,jsx}",
    "stylelint": "stylelint src/**/*.js",
    "generate-app-icons": "sh ./scripts/generate-app-icons.sh"
  }

Dlaczego jest to istotne? Otóż bez odpowiedniej komendy, nie zostanie trigerowany odpowiedni script, który umożliwi utworzenie stosowanej paczki, która będzie wymagana na danym hoście. Przykładem może tu być, jak skonfigurować deployment and hosting z Gatsby.js https://www.gatsbyjs.org/docs/deploying-and-hosting/.

Wiemy, jakie komendy, wiemy jakie freameworki, ale co z tymi npm i yarn?

To nic innego, jak menadżery pakietów, które dysponują zasobem powiększanym przez programistów z całego świata.

Za ich pomocą instalujemy paczki, które są nam potrzebne w kilka chwil i korzystam z dobrodziejstwa tworzonego kodu przez innych programistów, w większości są to paczki zawierające komponenty gotowe do użycia, które w dużej mierze są opisane.