< Node.js

SWC

Szerző: Sallai András

Copyright © 2024, Sallai András

Szerkesztve: 2024

Licenc: 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.

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 } } }