svelte renderダウンロード-Svelte svelte renderソースコードのダウンロード

svelte render

その他のカテゴリー

1.0.0

ダウンロード

@metamodern/svelte-render

Svelteアプリ向けのフレンドリーなJamstack中心のビルドツール

私はこのユーティリティを作成して、SvelteプロジェクトのScaffold Build構成を作成しました。 Netlifyで展開できる最新の静的サイトとクライアント側アプリに焦点を当てているため、Sapperには必要ないサーバー側の開発用の多くのインフラストラクチャが含まれています。 Svelteキットは、Sapperの次世代の代替品として角を曲がっていますが、近い将来には生産対応ではないかもしれないので、しっかりと交換するまでこのCLIツールを維持します。

特徴

svelte-renderスターターロールアップ構成の上に追加する機能の一部を以下に示します。

賢明なディレクトリ構造を想定していますが、カスタマイズを許可します
一般的なレンダリングオプションのためのフラグを備えたCLIスクリプトが含まれています
箱から出した必須プラグインが含まれています
JavaScript構成ファイルをサポートして、追加のプラグインなどをインポートします。
組み込みのバベル構成が付属しています（輸送しないオプションを備えています）
レンダリングフックをサポートして、追加のビルドステップを自動化します
ESモジュールはどこにでも - 二度とrequire()としません！

インストール

npm i @metamodern/svelte-render

CLI使用

CLIスクリプトはESモジュールのみとしてリリースされます。最小node.jsバージョンは14です（リリース日時点の最新のLTS）。

npx svelte-render [context] [--key = value]

# default to process.cwd() as context
cd project
npx svelte-render [--key = value]

# skip production optimizations
npx svelte-render --development

# just output HTML from the entry file
npx svelte-render --client=0 --noCss

# specify a custom directory structure
npx svelte-render --src=. --dist=public

# specify the path to your config file
# ** if not at ./render.config.js **
npx svelte-render --configFile=./config/svelte-render.js

構成ファイル

オプションは、構成ファイルを使用して指定できます。ファイルは、ESモジュールのインポート/エクスポート構文を使用する必要があります。デフォルトのエクスポートは、コマンドラインオプションを含むオブジェクトを装備として取得し、レンダリング関数に渡す追加オプションを指定するオブジェクトを返す関数である必要があります。

構成ファイルは./render.config.js （ contextと比較して）で見つかると予想されますが、上記のようにコマンドラインからカスタムパスを指定できます。

レンダリング関数に渡される可能性のあるすべてのオプションのリストについては、以下を参照してください。

JavaScript APIおよび構成オプション

JavaScript APIはESモジュールのみとしてリリースされます。 commonjs require()サポートされていません。

モジュールのデフォルトエクスポートは、次のパラメーターを備えた関数です。

 async function ( context : string , {
  src = 'src' ,
  assets = 'assets' ,
  dist = 'dist' ,
  entry = 'index.svelte' ,
  client = 'client.js' ,
  noCss = false ,
  development = false ,
  transpile = ! development ,
  rollupInputPlugins = [ ] ,
  rollupInputOptions = { } ,
  compilerOptions = { } ,
  sveltePreprocess = { } ,
  svelteOptions = { } ,
  terserOptions = { } ,
  browsers = 'defaults' ,
  babelPresets = [ [ '@babel/preset-env' , {
    targets : browsers ,
    corejs : 3 ,
    useBuiltIns : 'usage' ,
  } ] ] ,
  babelPlugins = [ ] ,
  babelOptions = { } ,
  before ,
  onRender ,
  after ,
} = { } ) : Promise < number > // returns 0 on success

必須

コンテキスト：プロジェクトのルートディレクトリへのパス

注：JavaScript APIを使用する場合にのみ、 context引数が必要です。 CLIスクリプトを使用する場合、 context process.cwd()にデフォルトです。

ディレクトリ構造の構成

次のオプションは、ファイル名またはパスとして指定され、 contextに対して解決されます。

SRC ： entryおよびclientソースファイルの親ディレクトリ
資産： distにコピーされる静的資産のディレクトリ
DIST ：Webファイルが提供されるパブリックディレクトリ
エントリ：最初のビューとして事前にレンダリングされるSvelteファイル（ developmentフラグがオンになっているときに無視されます）
クライアント：クライアント側のスクリプトとして展開されるJavaScriptソースファイル（静的HTMLのみをレンダリングするには、 client falseに設定し、 developmentフラグを使用しないでください）

レンダリングオプションフラグを設定します

NOCSS ：Svelte <style>ブロックから生成されたCSSを出力しないでください
開発：生産の最適化をスキップします（プレレンダリングマークアップ、JSの移動、JS＆CSSの模倣）
トランスパイル：バベルを使用して、ターゲットブラウザに必要に応じてクライアント側JSを変換/ポリフィルします（ developmentフラグが渡されない限り、デフォルトでオンになります）

高度なレンダリングオプション（ロールアップ、Svelte、Terser用）

rollupinputplugins ：ロールアップに合格する入力プラグイン（公式、コミュニティ）
rollupinputoptions ：ロールアップするためにパスする追加の入力オプション
CompilerOptions ： rollup-plugin-svelteに合格するコンパイラオプション（ compilerOptionsキーの下）
Sveltepreprocess ： rollup-plugin-svelte （ preprocess Keyの下）に合格する前処理機能
Svelteoptions ： rollup-plugin-svelteに合格する追加のオプション
Terseroptions ： rollup-plugin-terserに合格するオプション