web-dev-qa-db-fra.com

Comment importer une fonction Lodash unique?

En utilisant webpack, j'essaie d'importer isEqual puisque lodash semble tout importer. J'ai essayé de faire ce qui suit sans succès:

import { isEqual } from 'lodash'

import isEqual from 'lodash/lang'

import isEqual from 'lodash/lang/isEqual'

import { isEqual } from 'lodash/lang'

import { isEqual } from 'lodash/lang'
javascriptlodash
61
Eh Dang

Si vous souhaitez simplement inclure isEqual et pas le reste des fonctions lodash (utile pour garder la taille de votre paquet petite), vous pouvez le faire dans ES6;

import isEqual from 'lodash/isEqual'

C'est à peu près la même chose que ce qui est décrit dans la lodash README , sauf qu'ils utilisent la syntaxe require().

var at = require('lodash/at');
33
Jo Sprague

Avec Webpack 4 et lodash-es 4.17.7 et supérieurs, ce code fonctionne.

import { isEqual } from 'lodash-es';

Cela est dû au fait que le Webpack 4 prend en charge sideEffects flag et que lodash-es 4.17.7 et versions supérieures incluent l’indicateur (défini sur false).

Modifier

À partir de la version 1.9.0, Parcel prend également en charge "sideEffects": false , threrefore import { isEqual } from 'lodash-es'; est également utilisable en arborescence avec Parcel.

14
kimamula

Pas lié à webpack mais je vais l'ajouter ici car beaucoup de gens se tournent actuellement vers TypeScript.

Vous pouvez également importer une fonction unique à partir de lodash en utilisant import isEqual from 'lodash/isEqual'; dans TypeScript avec l'indicateur esModuleInterop dans les options du compilateur (tsconfig.json).

exemple

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "lib": ["es6", "dom"],
    "moduleResolution": "node",
    "esModuleInterop": true,
    ...
  }
}
2
Alex Beauchemin

Lodash énumère quelques options dans leur README :

  • babel-plugin-lodash

    • Installez lodash et le plugin babel:
    $ npm i --save lodash
$ npm i --save-dev babel-plugin-lodash @babel/cli @babel/preset-env
    • Ajoutez ceci à votre .babelrc
    {
  "plugins": ["lodash"],
  "presets": [["@babel/env", { "targets": { "node": 6 } }]]
}
    • Transforme cela
    import _ from 'lodash'
import { add } from 'lodash/fp'

const addOne = add(1)
_.map([1, 2, 3], addOne)

    En gros à ceci:

    import _add from 'lodash/fp/add'
import _map from 'lodash/map'

const addOne = _add(1)
_map([1, 2, 3], addOne)

  • lodash-webpack-plugin

    • Installez le plugin lodash et webpack:
    $ npm i --save lodash
$ npm i --save-dev lodash-webpack-plugin babel-core babel-loader babel-plugin-lodash babel-preset-env webpack
    • Configurez votre webpack.config.js:
    var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
var webpack = require('webpack');

module.exports = {
  'module': {
    'rules': [{
      'use': 'babel-loader',
      'test': /\.js$/,
      'exclude': /node_modules/,
      'options': {
        'plugins': ['lodash'],
        'presets': [['env', { 'modules': false, 'targets': { 'node': 4 } }]]
      }
    }]
  },
  'plugins': [
    new LodashModuleReplacementPlugin,
    new webpack.optimize.UglifyJsPlugin
  ]
};

  • lodash-es en utilisant le lodash cli

    • $ lodash modularize exports=es -o ./
1
mlunoe

import { isEqual } from 'lodash-es'; importe la bibliothèque entière. J'utilise Rollup qui devrait faire trembler les arbres par défaut. 

Chaque fois que j'ai écrit mes propres modules, cette syntaxe d'importation nommée fonctionne et l'arborescence Rollup réussit, alors je ne comprends pas trop pourquoi cela ne fonctionne pas avec Lodash. 

0
o-t-w

cela a réellement fonctionné pour moi

import { isEqual } from 'lodash';
0
viktorko99