SWC

• Szerző: Sallai András
• Copyright © 2024, Sallai András
• Szerkesztve: 2024
• Licenc: CC BY-SA 4.0
• Web: https://szit.hu

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

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

src/logger.js

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

src/index.js

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

Lehet így is:

npx swc src -d dist --strip-leading-paths

Vagy így:

npx swc src/*.js -d dist --strip-leading-paths

A projekt gyökérkönyvtárában hozzunk létre egy .swcrc nevű fájlt a következő tartalommal:

.swcrc

{
    "minify": true
}

Fordítsuk újra és nézzük meg az eredményt:

npx swc src/index.js -d dist --strip-leading-paths

spack.config.js

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:

spack.config.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.

Az src könyvtárban használjunk .ts kiterjesztésű fájlt.

Az .swcrc beállítófájl legyen:

.swcrc

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