使用ESlint正确按需导入 lodash方法

lodash 是很好用的前端工具库，可以说做前端的没有不知道它的存的，npm上周下载量5千万，是react的两倍，可见其有多受欢迎，因官方上使用都是全量导入的使用示例，导致很多新手使用时都用的全量导入方式，这样使用得即使只用了一个lodash方法，也引入了其全量的包，资源有点浪费

怎么才能按需导入

第一种: 二级默认导出方式

import map from 'lodash/map'

第二种：使用其module版 lodash-es

import { map } from 'lodash-es'

以上两种方式都可以按需导入lodash方法，从而使没有导入的方法tree-shaking掉

按需导入的问题

第一种方式：要是有很多人开发时，即使说明了，也可能有人使用这样的导入 import * as _ from 'lodash',那相当于前面的努力白做了，所以最好是对这代码做效验报错，并提示正确的引入方式

第二种方式：有的人可能使用 import map from 'lodash-es/map' 或 import { map } from 'lodash-es/map'方式导入不优雅,要是用lodash-es肯定使用一级导入更合理，也更集中入导

设置ESlint规则，正确导入lodash

ESLint提供了一个名为 no-restricted-imports 规则，这个规则可以统一规范在项目中使用的依赖

第一种方式：使开发人员只能使用 import map from 'lodash/map'二组默认导入方式

设置规则如下

'no-restricted-imports': ['error', {
          'paths': [
            {
              'name': 'lodash',
              'message': '要使用类似 import get from \'lodash/get\' 的导入方式'
            },
          ]
        }]

代码会有提示如下

第二种方式： 使开发人员只能使用import { map } from 'lodash-es'一级导入，那么只要限制二级导入就可以 规则可以这么设置如下

no-restricted-imports: ["error", { patterns: [{
    group: ["lodash-es/*"],
    message: "请使用一级导入方式，如 import { get } from 'lodash-es'"
}]}]

使用后有提示

设置ESlint规则，检查代码，再也不用人眼code review 提升效率，简化工作

禁止使用es6中有的lodash方法

项目都用现代浏览器，所以es6的方法都是支持的，按需导入都用了，那么能用原生js肯定用原生最好，所以设置规则禁止使用 es6 中有的lodash方法

以 lodash-es 为例 设置如下

'no-restricted-imports': ['error', {
            {
              name: 'lodash-es',
              importNames: ['filter', 'map', 'includes', 'forEach', 'isArray', 'min', 'max', 'get', 'findIndex', 'has', 'find', 'pull', 'push', 'isUndefined'],
              message: "请使用js相应原生方式"
          }
          ]
        }]

importNames 中有的都会报错 如下图 has 为例

以上是项目重构时，对lodash做的一些规则设置，为了更好按需导入，尽量减少不必要的依赖引入

no-restricted-imports的规则设置详情地址： eslint.org/docs/latest…