1

webpackのProviderPluginについて質問です。

const {hoge, fuga} = require('hoge-fuga');

のように一つのモジュールの返り値を分割したい場合はどう記述すればいいのでしょうか。

// やりたいイメージ
module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            {hoge, fuga}: 'hoge-fuga'
        })
    ]
}

2 件の回答 2

1
const {hoge, fuga} = require('hoge-fuga');

ができるモジュール hoge-fuga は既にあって(分割代入は理解していて)、同じことを webpack.ProvidePlugin() で行いたいということでしょうか。

それを実現する機能が webpack 2.2.0 で実装されました。

feat request: ProvidePlugin property import · Issue #2864 · webpack/webpack

分割代入のような記法ではなく、モジュール名に加えてプロパティ名を指定します。

const webpack = require('webpack');

module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            hoge: ['hoge-fuga', 'hoge'],
            fuga: ['hoge-fuga', 'fuga']
            // ちなみに ['hoge-fuga', 'hoge', 'piyo'] なら hoge-fuga.hoge.piyo 相当
        })
    ]
};
1
  • ありがとうございます。やはり別々に指定する必要があるということでしょうか。配列での指定はESMのdefaultを受け取る手段としての利用で見たことはありましたが、そこまで深い層のプロパティを参照できるのは知らなかったので勉強になりました。
    – hogehoge
    Commented 2019年1月23日 6:05
1

WebPackは知りませんが、お探しなのは分割代入では無いでしょうか(ECMAScript 6の機能)。
代入先の変数と同じ名前のプロパティを持ったオブジェクトを返すと出来ます。

function x() {
  return {a: 9, b: 'hello', c:Date.now()};
}

//宣言と同時に
var {a, b, c} = x();
console.log(1, a, b, c);

//先見と代入を分ける場合は()で囲む必要あり
//var a, b, c;
//({a, b, c} = x());

//変数名を変える場合
var {a: foo, b:bar, c:time} = x();
console.log(2, foo, bar, time);

//上2つを同時に
var m, n, o;
({a: m, b: n, c:o} = x());
console.log(3, m, n, o);

//class
class Z {
  constructor() {
    this.t = Date.now();
    this.h = 'hello';
    this.nine = 9;
  }
}
var {t, h, nine} = new Z();
console.log(4, nine, h, t);

個人的に変数名を変える構文が左右逆な気がしますが、あっています。

1
  • ありがとうございます。まさに分割代入を利用してCommonJSなモジュールの返り値をそのまま変数にしたいという質問でした。
    – hogehoge
    Commented 2019年1月23日 5:59

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。