El siguiente script es el que utilizaremos en los directos para generar el scaffolding de carpetas. Por debajo, utiliza ViteJS para un desarrollo rápido basado en ESM con una estructura de carpetas personalizada.
node --version
)npm --version
)which wget
)which jq
)URL de descarga del script: mkweb
sudo wget INSERTA_AQUI_LA_URL_ANTERIOR -O /usr/local/bin/mkweb
sudo chmod +x /usr/local/bin/mkweb
Para utilizar el script, simplemente lo ejecutamos pasándole por parámetro el nombre de la carpeta del proyecto, que deberá coincidir con el nombre del repositorio. Utiliza preferentemente minúsculas y no uses espacios o signos de acentuación.
mkweb name-folder
cd name-folder
git remote add origin [email protected]:GITUSER/REPONAME.git
npm install
code .
npm run dev
A continuación puedes ver el contenido del script, por si quieres examinar los pasos que realiza, o si quieres adaptarlo a tu gusto. El objetivo del script es simplemente tener una herramienta rápida y cómoda para generar proyectos sin perder demasiado tiempo.
#!/bin/bash
VERSION="0.1"
NAME=$1
JQ=$(which jq)
WGET=$(which wget)
NPM=$(npm --version)
NPM=${NPM::1}
if [ -z "$JQ" ]; then
echo "jq not detected. Install with sudo apt-get install jq"
exit
fi
if [ -z "$WGET" ]; then
echo "wget not detected. Install with sudo apt-get install wget"
exit
fi
if [[ "$NPM" == "6" ]]; then
echo "npm7 is required. Install with npm install -g npm"
exit
fi
if [ $# -eq 0 ]; then
echo "mkweb $VERSION. Sintaxis:"
echo -e " $(basename $0) <nombre-carpeta>\n"
echo "Recuerda que necesitas tener instalado jq, wget y npm7+."
exit
fi
npm init @vitejs/app $NAME -y -- --template vanilla >/dev/null
cd "$NAME"
# Inicializamos git
git init
cat >apackage.json << EOF
{
"scripts": {
"build": "rm -rf dist && vite build",
"deploy": "gh-pages -d dist"
},
"keywords": [],
"license": "ISC"
}
EOF
jq -s '.[0] * .[1]' package.json apackage.json >package2.json
rm apackage.json package.json index.html
mv package2.json package.json
rm main.js style.css favicon.svg
mkdir public
mkdir -p src/{components,assets}
touch src/index.{css,js}
cat >.gitignore << EOF
node_modules/
dist/
EOF
cat >postcss.config.js << EOF
module.exports = {
plugins: {
"postcss-nesting": true
}
};
EOF
cat >src/index.html << EOF
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
<script type="module" src="./index.js"></script>
</head>
<body>
</body>
</html>
EOF
cat >vite.config.js << EOF
const path = require("path");
const mode = process.env.NODE_ENV === "production" ? "production" : "development";
const base = mode === "production" ? "/" + path.basename(process.cwd()) + "/" : "/";
module.exports = {
root: "src",
base,
mode,
publicDir: "../public",
build: {
outDir: "../dist",
assetsDir: "./"
}
};
EOF
cat >.eslintrc.js << EOF
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": [
"standard"
],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"quotes": ["error", "double"],
"semi": ["error", "always"],
"comma-dangle": ["error", "only-multiline"],
"space-before-function-paren": ["error", "never"]
}
};
EOF
cat >.stylelintrc << EOF
{
"extends": "stylelint-config-standard",
"rules": {
"declaration-colon-newline-after": "always-multi-line",
"selector-type-no-unknown": null,
"property-no-unknown": [true, {
"ignoreProperties": ["content-visibility"]
}]
}
}
EOF
npm install --save --package-lock-only --no-package-lock -D \
stylelint stylelint-config-standard \
eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise \
postcss-nesting \
gh-pages
cat << EOF
¡Listo! Para empezar, escribe:
cd $NAME
git remote add origin <repo>
npm install
npm run dev
EOF
Volver