babel-plugin-lodashでlodashの一部の関数だけ取り込む
babel-plugin-lodashというBabelプラグインを見かけたので早速試しに使ってみた。
package.json
{ "private": true, "dependencies": { "lodash": "^3.10.1" }, "devDependencies": { "babel": "^6.3.26", "babel-cli": "^6.4.0", "babel-plugin-lodash": "^1.1.0", "babel-preset-es2015": "^6.3.13" } }
lodashがver.4.0.0になったのだけど、対応していないみたいなのでlodashのver.3をインストールした。 lodash-esというものが追加されていたようなのだけど、ver.4ならこちらを使えば動作するのだろうか。
.babelrc
{ "presets": [ "es2015" ], "plugins": [ "lodash" ] }
src/index.js
import _ from 'lodash'; console.log(_.get({ aaa: { bbb: 100 } }, 'aaa.bbb'));
コンパイル
$ ./node_modules/.bin/babel --out-dir ./lib ./src
lib/index.js
'use strict'; var _get = require('lodash/object/get'); var _get2 = _interopRequireDefault(_get); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } console.log((0, _get2.default)({ aaa: { bbb: 100 } }, 'aaa.bbb'));
_.getだけ使用しているので、それだけ取り込まれている。
これでさらにwebpackを使えばブラウザでも取り込まれるのだろうと思う。