Vue.jsアプリでPoiをカスタマイズする
Poi を使用してVue.jsアプリをセットアップすることは、非常に簡単で楽しい経験であり、多くの魔法が起こっています。 しかし、それをカスタマイズする必要がある場合はどうなりますか?
Poi を使用すると、カスタマイズが簡単になり、さまざまな方法が公開されます。
構成ファイル
poi.config.js は、Poiが慣例で理解するpackage.jsonと同じレベルで作成できます。 必要に応じて、CLIの--config [path]
オプションを使用してパスを変更できます。
設定ファイルはWebpackと同様の構造になっています。 一部のオプションは、直接Webpackプラグインのオプションです。
私たちができるいくつかの一般的なカスタマイズを見てみましょう。
HTML出力
Poiは、内部でhtml-webpack-pluginを使用しています。 デフォルトテンプレートをチェックアウトすると、titleとdescriptionが構成可能であることがわかるので、これらをカスタマイズできます。
poi.config.js
module.exports = { html: { title: 'Coolgator', description: 'Cool and hungry alligator' } };
package.json のデータを使用できます。これは、一般的なパターンです。
poi.config.js
const pkg = require('./package.json'); module.exports = { html: { title: 'Coolgator', description: pkg.description } };
ただし、デフォルトのテンプレートはカスタマイズが非常に制限されています。 ただし、心配する必要はありません。独自のテンプレートを使用できます。 poi.config.jsファイルと同じレベルにindex.ejsを作成し、<icon>
のリストを追加しましょう。
index.ejs
<head> ... <% htmlWebpackPlugin.options.icons.forEach(function(icon) { %> <link rel="icon" sizes="icon.size" href="<%= icon.url %>"> <% }); %> ... </head>
次に、icons
プロパティを追加します。
poi.config.js
const pkg = require('./package.json'); module.exports = { html: { title: 'Coolgator', description: pkg.description, icons: [ { size: '32x32', url: 'http://via.placeholder.com/32x32' } ] } };
フォルダ構造
出力ディレクトリの名前をカスタマイズできます。
poi.config.js
module.exports = { dist: 'buildy' // defaults to 'dist' };
filename
を使用すると、ファイルの名前を設定できます。 ここでは、Webpackの[name]
、[hash]
、[id]
、[ext]
およびすべての特殊名変数を使用できます。 デフォルトは次のとおりです。
poi.config.js
module.exports = { filename: { js: '[name].[hash:8].js', css: 'style.css', images: 'assets/images/[name].[ext]', fonts: 'assets/fonts/[name].[ext]', chunk: '[id].chunk.js' } };
staticFolder
を使用すると、rawファイルのコピーに使用するフォルダー名をdistに変更できます。
poi.config.js
module.exports = { staticFolder: 'assets' };
環境変数
env
プロパティ内で、カスタム変数を定義できます。
poi.config.js
module.exports = { env: { VERSION: '2.3' } };
それらはコードで利用可能になります:
const version = process.env.VERSION;
そしてテンプレートで:
<meta name="version" content="<%= htmlWebpackPlugin.options.env.VERSION %>" />
Autoprefixer
autoprefixer
を使用して、PostCSS自動プレフィックスプラグインの設定を変更します。
poi.config.js
module.exports = { autoprefixer: { browsers: ['ie > 9', 'last 4 versions'] } };
SCSSの使用
プリプロセッサを使用するには、ローダーと可能な依存関係をインストールする必要があります。
たとえば、 .scss ファイルをインポートするには、次のものをインストールする必要があります。
$ npm install node-sass sass-loader --save-dev
package.jsonでの構成
Poiは、プロジェクトのpackage.jsonファイルのpoi
プロパティを使用してカスタマイズすることもできます。
package.json
{ "poi": { "dist": "buildy", "staticFolder": "assets" } ... }
まとめ
Poiは簡単にカスタマイズできると同時に、構成の海に沈むのを防ぎます。 ここでは、最も一般的なものを示しました。 ドキュメントにアクセスして、他に何ができるかを確認してください。 ただし、可能な限り規則に従うことをお勧めします。