フロントエンドとコーヒー

フロントエンドとか日々のこととか

webpack + bowerで依存解決がうまくいかない時はaliasをつかうとよいかも

webpack + bowerでライブラリの依存解決がちょっとうまくいかないことがあったのでメモ。

以下はusage with bowerのConfigurationのコードです。

var path = require("path");
var webpack = require("webpack");
module.exports = {
    resolve: {
        root: [path.join(__dirname, "bower_components")]
    },
    plugins: [
        new webpack.ResolverPlugin(
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        )
    ]
}

resolve.rootでbower_componentsのディレクトリへのパスを指定。

そしてResolverPlugin.FileAppendPluginを使用することでwebpackにbowerでインストールしたライブラリを

var $ = require('jquery');

このような形で呼び出すことができるようになります。

ResolverPlugin.FileAppendPluginは一体なにをしているかというと、bower_components内の各ライブラリのフォルダのbower.jsonファイルを確認して、mainに書かれているファイルを取得していくれます。

例えばjQueryのbower.jsonの場合

{
  "name": "jquery",
  "version": "2.1.3",
  "main": "dist/jquery.js",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "build",
    "speed",
    "test",
    "*.md",
    "AUTHORS.txt",
    "Gruntfile.js",
    "package.json"
  ],
  "devDependencies": {
    "sizzle": "2.1.1-jquery.2.1.2",
    "requirejs": "2.1.10",
    "qunit": "1.14.0",
    "sinon": "1.8.1"
  },
  "keywords": [
    "jquery",
    "javascript",
    "library"
  ]
}

このmainに書かれているdist/jqurey.jsを取得してくれているのです。

ただ今回、bowerでインストールしたライブラリの中にbower.jsonが含まれていないものがあったんです。 もちろんうまく読み込むことができませんでした。

なのでそのライブラリに関しては個別に依存を解決することに。

個別に外部ライブラリを読み込むにはresolve.aliasを使います。

var path = require("path");
var webpack = require("webpack");
module.exports = {
    resolve: {
        root: [path.join(__dirname, "bower_components")],
        alias: {
            hoge: 'path/to/hoge.js'
        }
    },
    plugins: [
        new webpack.ResolverPlugin(
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        )
    ]
}

こうすることで

var fuga = require('hoge');

このように呼び出すことができます。

ちなみに指定するパスはbower_componentsからのパスです。