Vue.jsアプリでPoiをカスタマイズする

getdocs

2年前

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は簡単にカスタマイズできると同時に、構成の海に沈むのを防ぎます。ここでは、最も一般的なものを示しました。ドキュメントにアクセスして、他に何ができるかを確認してください。ただし、可能な限り規則に従うことをお勧めします。