Proměnné prostředí
Při vývoji aplikace musíme rozlišovat mezi produkčním a vývojovým prostředím. Zde se hodí proměnné prostředí. S takovými proměnnými jste se pravděpodobně již dříve setkali, například PATH
nebo PORT
.
V této části tutoriálu nainstalujeme a nastavíme dotenv
a vytvořte jeho soubor prostředí s několika proměnnými.
Instalace závislostí
$ yarn add dotenv -D
- dotenv: Modul, který načítá proměnné prostředí z
.env
soubor doprocess.env
.
Konfigurace
$ open webpack.config.js
const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
require('dotenv').config()
// Content omitted for better readability
// ...
Vytvořte soubor prostředí
$ touch .env
$ open .env
# Overrides the NODE_ENV and PORT number
NODE_ENV=development
PORT=9000
Zrušit sledování .env (doporučeno)
$ open .gitignore
node_modules
dist
.env
Poskytování souborů z dev serveru
Dosud jsme testovali naši aplikaci tak, že jsme přešli do složky dist a otevřeli soubor index.html z našeho oblíbeného prohlížeče.
Existuje mnohem jednodušší a lepší způsob, jak to udělat:zadejte WebpackDevServer.
Instalace závislostí
$ yarn add webpack-dev-server -D
- webpack-dev-server: Umožňuje vám poskytovat aplikaci z místního serveru.
Přidat skript pro spuštění serveru
{
"scripts": {
"build": "yarn lint && yarn test && webpack",
"build:watch": "yarn build --watch",
"test": "yarn lint && yarn jest",
"test:watch": "jest --watchAll",
"lint": "standard",
"start": "webpack-dev-server"
},
...
}
$ yarn start
Konfigurace
WebpackDevServer je vysoce konfigurovatelný. Pokud chcete přepsat její výchozí chování, jako je číslo portu nebo zda se má aplikace zobrazovat na nové kartě prohlížeče, stačí jej zadat v devServer
, jako v příkladu níže:
$ open webpack.config.js
// ...
// Content omitted for better readability
/*
1. Destruct process.env object
2. Rename PORT to port
3. Rename NODE_ENV to mode
*/
const {
PORT: port,
NODE_ENV: mode
} = process.env
const devServer = {
port,
open: true
}
module.exports = {
mode,
devServer,
// ...
}
$ yarn start
Závěr
V tomto tutoriálu jsme se naučili, jak pracovat s proměnnými prostředí a jak obsluhovat naši aplikaci s dev serverem Webpack.