LOG

webpack shimming modulesの訳

この記事はwebpackのshimming modulesを訳した内容です。

作成日15/05/07

補足:shimming

Ruby – Shimの意味 by @ironsand on @Qiita

webpackがパース出来ないファイルがあります。
それはサポートしていないモジュールのフォーマットかモジュールですらないものです。
したがって、それらのファイルをモジュールに変換するオプションがあります。

USING LOADERS

このページのloaderのサンプルは全てrequireで呼び出されています。これはデモに最適だからです。
requireの代わりにwebpack configで設定を行っても構いません。
loaderの詳しい使い方に関してはUsing loaders(訳した記事あります)を読んでください。

IMPORTING

require()を用いてインポートされない依存関係を持っているファイルの時の解決方法

imports-loader

このloaderはファイルのローカル変数上にモジュールか任意のJavaScriptファイルを置ことを許可します

例:file.jsはグローバル変数 $ を期待し、モジュール jqueryが使える状態にしたい。

require("imports?$=jquery!./file.js")

例:file.jsは設定用のxConfigというグローバル変数があることを期待し、その値は{value:123}にしたい。

require("imports?xConfig=>{value:123}!./file.js")

例:file.jsはthisがglobalコンテキストであると期待する。

require("imports?this=>window")
// もしくは
require("imports?this=>global")

plugin:ProvidePlugin

このプラグインは全てのモジュールを変数として利用できるモジュールを作ります。
このモジュールは変数を利用する場合に限り必要とされます。

例:require(“query”)と書かずに全てのモジュールから利用可能な$とjQueryを作ります。

new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})

EXPORTING

ファイルではなく値をエクスポートします。

exports-loader

このloaderはファイルの中に変数をエクスポートします。

例:変数XModuleにセットする

var XModule = require("exports?XModule!./file.js")

例:変数XParser、Minimizerにセットする

var XModule = require("exports?Parser=XParser&Minimizer!./file.js"); XModule.Parser; XModule.Minimizer

例:グローバル変数Xmoduleにセットする

require("imports?XModule=>undefined!exports?XModule!./file.js")
// (import to not leak to the global context)

例:windowのプロパティ window.XModuleにセットする

require("imports?window=>{}!exports?window.XModule!./file.js

FIXING BROKEN MODULE STYLES

誤ったモジュールのスタイルを利用するファイルが多少あります。
webpackにこのスタイルを使わないように指示することで解決することが出来ます。

Disable some module styles
モジュールのスタイルを無効にする

例:Broken AMD

require("imports?define=>false!./file.js")

例:Broken CommonJs

require("imports?require=>false!./file.js")

configuration option module.noParse

これはwebpackによってパースを無効にするため、依存関係が利用できなくなります。
これはパッケージ化されたライブラリの訳に立つことがあります。

例:

{
module: {
noParse: [
/XModule[\\\/]file\.js$/,
path.join(__dirname, "web_modules", "XModule2")
]
}
}

メモ:exportsとmoduleはまだ使える状態です。ipmorts-loaderを使いこれらを未定義にすることが出来ます。

script-loader

This loader evaluates code in the global context, just like you would add the code into a script tag. In this mode every normal library should work.require, module, etc. are undefined.

Note: The file is added as string to the bundle. It is not minimized by webpack, so use a minimized version. There is also no dev tool support for libraries added by this loader.

EXPOSING

モジュール自身をグローバルコンテキストにエクスポートしたいケースがあります。
本当に必要なとき以外利用しないでください。(ProvidePluginを使ったほうが良いです)

expose-loader

このloaderはモジュールをグローバルコンテキストに公開します。

例:file.jsをXModuleとしてグローバルコンテキストに公開する

require("expose?XModule!./file.js")

ORDER OF LOADERS

まれに1つ以上のloaderを適用する必要があるときがあります。
そういう場合はloaderを正しい順番で使う必要があります。

inlined(コマンドライン?):expose!imports!exports

設定ファイル:expose before imports before exports