Script mkweb - Lenguaje JS

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.

Requisitos

Linux, Mac o Windows con WSL
NodeJS 14+ (comprueba con node --version)
NPM 7+ (comprueba con npm --version)
wget (comprueba con which wget)
jq (comprueba con which jq)

Instalación

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

Uso

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

Contenido del script /usr/local/bin/mkweb

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