pug jsテンプレートでjavascriptモジュールを使用する方法

Question

pugテンプレートでランダムな文字列を作成するには、random-string javascriptモジュールを使用します。

まず私はこのようにNPMを経由して、それをインストールします。

npm install random-string 

はその後パグテンプレートで私はこれを使用：

.site 
    .title 
     - var string = randomString({length: 20}); 
     | #{string} 

をしかし、ファイルをコンパイルしながら、私はこのエラーを得た：

randomString is not a function 

どのようにpug js temaplteでサードパーティ製のjavascript関数を使用できますか？

Answer 1

phpStormの更新、そして、セットアップファイルウォッチャー

をウォッチャー

ファイルまず、ローカルパグ-CLIおよびランダムな文字列をインストールし、

npm install pug-cli random-string --save 

オリジナル答え

ランダムな文字列を設定し、必要とするローカル変数として、テンプレート内でアクセスすることができます。例えば、

template.pug

.site 
    .title 
     - var string = randomString({length: 20}); 
     | #{string} 

あなたはパグ-CLIを使用している場合は、パグ-CLIの同じスコープ内でランダムな文字列をインストールパグ

const pug = require('pug'); 

// Compile template.pug, and render a set of data 
console.log(pug.renderFile('template.pug', { 
    randomString: require('random-string') 
})); 
//-> <div class="site"><div class="title">o0rGsvgEEOHrxj7niivt</div></div> 

を使用して、それをコンパイルし、文字列またはファイルを使用してオプションを指定します。それが（例えば、あなたのコントローラのような）あなたはそれを呼び出しているファイル内のrender()を呼び出すときに渡されていない限り

pug -O "{randomString: require('random-string')}" template.pug 

Answer 2

あなたのパグファイルはrandomStringの範囲を持っていません。

個人的に

this.render("[pugFilename]", { 
    randomString = require("randomstring") // whatever package name you're using 
} 

、私は、ビューの外側と私ができる、レンダリングされるビューを要求しているスクリプト内の任意の非表示のものをやって好みます。

Pugの構文は、そうでなければ非常に乱雑に見え始め、それに従うのが難しくなります。

上記のコードをあなたの質問に置き換えても問題ありません。変数名（またはキー）をもっと意味のあるものに変更することをお勧めします。

例えば

this.render("[pugFilename]", { 
    randomStr: randomString({ length: 20 }) 
});