カテゴリー
【nodejsアプリ開発】SvelteKitでポータブルなバイナリアプリを作れるか(しかし現状では失敗)
※ 当ページには【広告/PR】を含む場合があります。
2023/02/09
+ Cloudflare (Pages): @sveltejs/adapter-cloudflare
+ Cloudflare (Workers): @sveltejs/adapter-cloudflare-workers
+ Netlify: @sveltejs/adapter-netlify
+ Node.js(サーバーサイド): @sveltejs/adapter-node
+ SSG(Static Site Generation)用: @sveltejs/adapter-static
+ Vercel: @sveltejs/adapter-vercel
SvelteKitへadapter-nodeを導入する
adapter-node
$ yarn add @sveltejs/adapter-node -D
adapter-auto
adapter-node
svelte.config.js
//👇コメントアウト
//import adapter from '@sveltejs/adapter-auto';
//👇adapter-nodeに置換
import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: [vitePreprocess()],
kit: {
adapter: adapter()
}
};
export default config;
$ yarn build
build
$ node build/index.js
adapter-node
pkgでSvelteKitアプリのバイナリ化
- pkgは現状でcommonjsしか使えない
- Vite(SvelteKit-nodeアダプター)はesmしか出力対応していない
babel
package.json
$ mkdir sk-binary
$ cp build sk-binary/
$ cd sk-binary
$ touch package.json
package.json
{
"name": "pkg-sveltekit",
"version": "0.0.1",
"description": "How to make a pkg app with SvelteKit.",
"bin": "lib/index.js",
"scripts": {
"pkg": "pkg",
"convert": "babel --plugins @babel/plugin-transform-modules-commonjs build -d lib",
"build": "yarn pkg . --debug"
},
"pkg": {
"targets": ["latest-linux-x64"],
"outputPath": "dist"
},
"devDependencies": {
"@babel/cli": "^7.18.10",
"@babel/core": "^7.18.10",
"@babel/plugin-transform-modules-commonjs": "^7.20.11",
"@babel/preset-env": "^7.18.10",
"nexe": "^4.0.0-rc.2",
"pkg": "^5.8.0"
}
}
$ yarn install
$ yarn convert
$ yarn build
SyntaxError: await is only valid in async functions and the top level bodies of modules
at new Script (node:vm:102:7)
at Socket.<anonymous> ([eval]:18:19)
at Socket.emit (node:events:537:28)
at addChunk (node:internal/streams/readable:324:12)
at readableAddChunk (node:internal/streams/readable:297:9)
at Readable.push (node:internal/streams/readable:234:10)
at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
トップレベルawait
//👇トップレベルawait = 以下のようにグローバルスコープにawaitがあるもの
await server.init({ env: process.env });
//↓↓↓↓↓↓↓↓
//👇asyncの即時関数で囲う
(async() => {
await server.init({ env: process.env });
})();
SyntaxError: Cannot use 'import.meta' outside a module
at new Script (node:vm:102:7)
at Socket.<anonymous> ([eval]:18:19)
at Socket.emit (node:events:537:28)
at addChunk (node:internal/streams/readable:324:12)
at readableAddChunk (node:internal/streams/readable:297:9)
at Readable.push (node:internal/streams/readable:234:10)
at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
import.meta
import.meta.url
//👇ESModuleで利用されるメタデータの引き出し
const dir = path.dirname(fileURLToPath(import.meta.url));
//↓↓↓↓↓↓↓↓
//👇CommonJS風に書き直し
const import_meta_url = require("url").pathToFileURL(__filename);
const dir = path.dirname(fileURLToPath(import_meta_url));
nexeでSvelteKitアプリのバイナリ化
{
"name": "pkg-sveltekit",
"version": "0.0.1",
"private": true,
"description": "How to make a pkg app with SvelteKit.",
"type": "module",
"scripts": {
"nexe": "nexe build/index.js --target=linux-x64-14.15.3"
},
"devDependencies": {
"nexe": "^4.0.0-rc.2"
}
}
$ yarn install
$ yarn nexe
$./sk-binary
file:///********/sk-binary/dist/handler.js:12725
this.cookies ??= [];
^^^
SyntaxError: Unexpected token '??='
at Loader.moduleStrategy (internal/modules/esm/translators.js:145:18)
「??」
「??=」
「??」
「??=」
this.cookies ??= [];
//↓↓↓↓↓↓↓↓
this.cookies = this.cookies ?? [];
internal/process/esm_loader.js:74
internalBinding('errors').triggerUncaughtException(
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'stream' imported from ******/handler.js
at packageResolve (internal/modules/esm/resolve.js:655:9)
at moduleResolve (internal/modules/esm/resolve.js:696:18)
at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:810:11)
at Loader.resolve (internal/modules/esm/loader.js:86:40)
at Loader.getModuleJob (internal/modules/esm/loader.js:230:28)
at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:56:40)
at link (internal/modules/esm/module_job.js:55:36) {
code: 'ERR_MODULE_NOT_FOUND'
node-fetch
fetch API
まとめ
参考サイト
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー