2017-03-26 10 views
1

ビルド中のWebアプリがあり、クライアントサイドに動的ウィジェットが構築されています。現在、私はnodejsとpugを私のサーバ側のテンプレートライブラリとして使用しています。私はpugのシンプルさが好きです。nodejsとpugを使用したクライアントサイドテンプレート

私は、クライアントサイドがユーザーが望むウィジェットを構築するビルディングブロックとして使用できる、一連の小さなpugファイルをサーバー上に持っていたいと思います。 client side server side templating nodejs

しかし、そのソリューションは、私が欲しいもののためにやり過ぎのようになります。

は、私がここで見つける以前のソリューションを使用してみました。さらに、ezelプロジェクトはもはや維持されておらず、2年後に更新されておらず、まだ翡翠を使用しているようです(npmは私に多くのエラーを与えます)。

ブラウザのpugで動的ウィジェットを構築したいだけです。このページは、私が望むものを持っているようです: https://pugjs.org/api/reference.html 特にpug.renderFile( 'path/to/file.pug'、options);関数は、私がウィジェットを動的に構築するために使用したいものとまったく同じように思えます(ユーザは、ウィジェットがどのように構築/表示されるかに関するすべてのコントロールを持っているので、ブラウザはHTMLビューを動的に構築する必要があります)。

私の問題は依存on: https://pugjs.org/js/pug.js ブラウザでrequire( 'pug')をする必要があります。私はすでに私のpackage.jsonの一部としてpugをインストールしています。 pug.jsを直接入手するより堅牢な方法はありますか?私はまだWeb開発の新しい、私の背景はC + +/Javaで、私は完全にブラウザーでpug.jsを使用する場合はベストソリューションか、より良い標準的なソリューションがある場合は完全にはわからない。私が投稿したstackoverflowの質問は、リモートで似ている唯一の投稿です。

+0

私はこの質問があまりにも広すぎるとは思わない。それは私によく焦点を当てているようです。 –

+0

私はこれを使用しています:https://github.com/happilymarrieddad/puglatizer – Costa

答えて

0

私が本当に好きな解決策を研究し、テストしました。 NPMにはpug-cliというクールなパッケージがあります。

https://www.npmjs.com/package/pug-cli

私は、次の操作を行うために私のNPMの起動スクリプトを修正:

pug -c -w --name-after-file -o public/js/views views/client/ 

何これは私が行うことができますするビュー/クライアントフォルダに入れるには、私のクライアントビューを作成しています。ビュー/クライアント/の変更を監視するタスクがバックグラウンドで実行されています。変更があれば、views/client /フォルダの.pugファイルをjavascriptに準拠させ、public/js/views /に保存します。クライアントコードでは、Template.jsを組み込み、jsにTemplate(パラメータ)を呼び出します。クライアントサイドにpug.jsは必要ありません。例えば、views/client/example.pugがpublic/js/views/exampleTemplate.jsに自動的に準拠するようになります。 これで、すべての作業が完了しました。クライアントはこのjsファイルをインクルードしていて、テンプレート化された文字列を取得するにはexampleTemplate(params)を呼び出します(異なるパラメータを使用して任意に呼び出すことができます)。これにより、サーバー側でビューが不明な場合に、クライアントから任意に/動的にビューを作成して構成することができます。

私のワークフローではこのアプローチが好きですが、私はより良い提案をしています。

0

あなたはWebPACKのを使用する場合:

https://github.com/pugjs/pug-loaderhttps://github.com/willyelm/pug-html-loaderがうまく機能します。ロールアップの場合

https://www.npmjs.com/package/rollup-plugin-pug + https://www.npmjs.com/package/rollup-plugin-pug-htmlがbrowserifyの場合

を(現在、我々は今、ロールアップでネイティブES6モジュールとbackupingバンドルで実験している、それがどのように動作するかテストする)良い解決策のように見えます:

https://www.npmjs.com/package/jadeify(試したことはなかった)

あなただけの任意のウォッチャーを実行して、ABO述べたように、JSファイルを生成することができますので、またパグ-CLIは、-cキーを持っています私は2017年に様々なバンドルツールを手に入れて以来、やや単純すぎるようです。

+1

TILが "あまりにも単純"は否定です –

関連する問題