[[oktatas:web:nodejs|< Node.js]] ====== SWC ====== * **Szerző:** Sallai András * Copyright (c) 2024, Sallai András * Szerkesztve: 2024 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]] * Web: https://szit.hu ===== Bevezetés ===== Az SWC a Speedy Web Compiler rövidítése. Az SWC fordító és csomagoló egyben, és Rust nyelven írták. Leginkább Node.js-re optimalizálva. Webhely: * https://swc.rs/ Egyéb csomagolók (bundler): * webpack * rollup * esbuild * parcel ===== Használat ===== Készítsünk egy Node.js projektet. npm init -y Benne egy src könyvtár, abban egy logger.js és egy index.js fájl:


app01/
  |-src/
  |  |-index.js
  |  `-logger.js
  `-package.json


class Logger {
    static log(msg) {
        console.log(msg);
    }
}
export default Logger;


class App {
    static main() {
        Logger.log("Hello World!");
    }
}
App.main();

Telepítsük a függőségeket: pnpm i --save-dev @swc/cli @swc/core Fordítsuk le az src könyvtár tartalmát: npx swc src/index.js A konzolra írja az eredményt. A -o kapcsolóval megmondhatjuk, milyen fájlba írjon. Legyen például egy output.js: npx swc src/index.js -o output.js Ezt követően a projekt gyökérkönyvtárba teszi az output.js fájlt, benne a lefordított JavaScript tartalom. Általában ezeket a fájlokat a dist könyvtárban szeretjük viszontlátni. Használjuk a -d kapcsolót: npx swc src/index.js -d dist Így azonban az src könyvtár is bekerül a dist könyvtárba. Használjuk a --strip-leading-paths kapcsolót: npx swc src/index.js -d dist --strip-leading-paths ===== Alternatívák ===== Lehet így is: npx swc src -d dist --strip-leading-paths Vagy így: npx swc src/*.js -d dist --strip-leading-paths ===== Beállítófájl ===== A projekt gyökérkönyvtárában hozzunk létre egy .swcrc nevű fájlt a következő tartalommal:


{
    "minify": true
}

Fordítsuk újra és nézzük meg az eredményt: npx swc src/index.js -d dist --strip-leading-paths ===== Csomagoló konfiguráció =====



module.exports = {
    entry: {
        web: __dirname + "/src/index.js",
    },
    output: {
        path: __dirname + "/dist",
    },
    options: {
        minify: true
    }
};

Fordítás: npx spack Ha így használjuk a dist könyvtárban létrejön egy web.js és egy web.js.map fájl. Beállíthatjuk a "web" helyett milyen néven jelenjen meg. Például bunle.js:



module.exports = {
    entry: {
        web: __dirname + "/src/index.js",
    },
    output: {
        path: __dirname + "/dist",
        name: "bundle.js"
    },
    options: {
        minify: true
    }
};

Ekkor egy bundle.js és egy bundle.js.map fájl jön létre. ===== TypeScript használata ===== Az src könyvtárban használjunk .ts kiterjesztésű fájlt. Az .swcrc beállítófájl legyen:


{
  "minify": true,
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": false
    }
  }
}