npm 管理のライブラリが提供する css をインポートする

Posted: , Modified:   NodeJs npm JavaScript Qiita

本稿は Qiita 投稿記事 のバックアップです．

概要

English

クライアントサイドのパッケージ管理は，bower から npm に移した方が良いらしい．npm 管理の JavaScript パッケージは，Browserify を使えばインポートできる．では，CSS はどうやってインポートすれば良いのか？例えば，bootstrap を npm でインストールして bundle.css に取り込むにはどうすれば良いのか？調べた結果をまとめる．

前提

タスクランナーとして Gulp を使う．また，各パッケージのフォルダ構成に依存しない方法を探す．また，下記の例では bootstrap を使用しているが， npm i --save bootstrap にてインストール済みとする．

Parcelify を使う

JavaScript のインポートに Browserify を使う場合，プラグインの一つである Parcelify の利用はメジャーな方法だろう．逆に，JavaScript をまったく使わないプロジェクトではダミーが必要になると思う．

Parcelify を使う場合，package.json の style 要素にインポートする CSS ファイルを列挙する必要がある．

{
  "style": [
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "./src/css/main.css"
  ]
}

例えば，bootstrap と自前の CSS ファイルの両方をインポートする場合は上記のように書く（他の項目については省略した）．そして，Gulp のタスクは次の通り．

gulp = require "gulp"
browserify = require "browserify"
parcelify = require "parcelify"
source = require "vinyl-source-stream"

gulp.task "browserify", ->
  b = browserify
    entries: ["./src/main.js"]
    extensions: [".js"]
  parcelify b,
    bundles:
      style: "./public/bundle/bundle.css"
  b.bundle()
    .pipe source "bundle.js"
    .pipe gulp.dest ".public/bundle/"

これで，browserify タスクを実行すれば package.json の style 属性に指定した CSS ファイルが一つにまとめられpublic/bundle/bundle.css に書き出される．

この方法の微妙なところは，package.json にインポートする CSS ファイルの相対パスを列挙する必要があるところで，パッケージのフォルダ構成が変わると，毎回設定しなおす必要がある．もしかしたら，各パッケージの package.json から情報を引っ張ってくる方法があるのかも知れないが，調べた限りでは分からなかった．

rework を使う

rework のプラグイン rework-npm は，各パッケージの package.json を調べて，必要な CSS ファイルをインポートしてくれる．rework を使う方法は複数あるが，Gulp から使うために gulp-rework を用いることにする．

まず，インポートするパッケージを列挙した css ファイルを用意する．例えば，bootstrap をインポートする場合，次のように書く．

@import "bootstrap";

/* その他の項目は省略 */

そして，Gulp のタスクは次の通り．

gulp = require "gulp"
rework = require "gulp-rework"
reworkNPM = require "rework-npm"

gulp.task "css", ->
  gulp.src "./src/*.css"
    .pipe rework(reworkNPM())
    .pipe gulp.dest "./public/bundle/"

これで，css タスクを実行すれば，bootstrap を含んだ CSS が public/bundle/main.css にできる．

この方法だと，bootstrap のフォルダ構成をいちいち調べなくても必要なファイルがインポートできる．ただし，これがうまくいくのは，各パッケージの package.json に style 属性があり，適切に記述されている場合のみである．style 属性がないパッケージについては，個別にフォルダ構成を調べなければならず，結局 Parcelify を使う場合と同じ手間がかかる．

まとめ

npm管理のライブラリが提供する css のインポート方法として，Parcelify を使う方法と rework を使う方法についてまとめた． 他にもっと良い方法があったら教えてください．

参考