「这是我参与11月更文挑战的第20天,活动详情查看:2021最后一次更文挑战」
在使用eslint的项目中,我们通常希望能够对 ES2015+ (ES6+) import
/export
的语法进行linting,并防止文件路径和导入名称拼写错误的问题,很幸运当前社区存在这么个插件,它的名字是:eslint-plugin-import
。使用它,可以执行以下命令:
npm i eslint-plugin-import
该插件定义了一些规则,如下:
- 确保导入指向可以解析的文件/模块。(
no-unresolved
) - 确保命名导入对应于远程文件中的命名导出。(
named
) - 在给定默认导入的情况下,确保存在默认导出。(
default
) - 确保导入的命名空间在取消引用时包含取消引用的属性。(
namespace
) - 限制可以在给定文件夹中导入哪些文件 (
no-restricted-paths
) - 禁止使用绝对路径导入模块 (
no-absolute-path
) - 禁止
require()
使用表达式 (no-dynamic-require
)调用 - 防止导入其他模块的子模块 (
no-internal-modules
) - 禁止导入中的 webpack 加载器语法 (
no-webpack-loader-syntax
) - 禁止模块导入自身 (
no-self-import
) - 禁止模块将具有依赖路径的模块导入回自身 (
no-cycle
) - 防止 import 和 require 语句中不必要的路径段 (
no-useless-path-segments
) - 禁止从父目录 (
no-relative-parent-imports
)导入模块 - 防止通过相对路径
no-relative-packages
导入包
在所有规则中,刚开始配置基本会遇到import/no-unresolved
的eslint规则报错,原因很简单: eslint无法识别webpack的别名。
webpack配置别名
别名,顾名思义就是,创建 import
或 require
的别名,来确保模块引入变得更简单。webpack中的配置一般如下:
// webpack配置文件
module.exports = {
resolve: {
alias: {
assets: path.resolve(__dirname, '../src/assets')
}
}
}
此时项目中引用assets
文件中的资源就变简单了。
// 原本需要这样,通过相对路径查找
import a from '../../src/assets/1.js'
// 现在只需要这样,路径采用别名,变简单了
import a from 'assets/1.js'
但是当我们使用Eslint时,此时会报错了,因为Eslit解析assets/1.js
会报找不到文件,因为这个webpack的别名。因此我们需要进行解决。
解决方案
方案1
在规则中,直接忽略掉以别名为开头的文件,配置如下,虽然这种方式可以解决问题,但并不推荐,因为存在误伤的可能性。
module.exports = {
// ignore配置webpack配置的别名
"import/no-unresolved": [2, {"ignore": ["src"]}]
}
方案2
这是推荐采用的方法,将解析到的重新做个映射。
module.exports = {
settings: {
'import/resolver': {
alias: {
map: [
// 这里参照webpack的别名配置映射
["src", '../src']
],
// 告诉resolver-alias有哪些后缀的文件要解析
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
},
},
},
}
优化
以上2种方法解决方式,都要要到webpack的别名声明,那么值每次从webpack进行拷贝配置进行同步总是不合适的,不够高效,因此这里可以做个优化,动态从webpack配置取值。优化如下:
let webpackConfig = require('/路径/webpack.config.js')
if(typeof webpackConfig === 'function'){
webpackConfig = webpackConfig()
}
/** 解决eslint不能处理webpack别名路径 */
let webpackPathAlias = webpackConfig?.resolve?.alias || {}
// 此时获取的便是别名参数映射了
webpackPathAlias = Object.keys(webpackPathAlias).map(key=>[key,webpackPathAlias[key]]
总结
至此便描述了eslint-plugin-import
的规则用处,以及如何解决no-unresolved
的问题。
今天的文章Eslint | eslint-plugin-import插件报了import/no-unresolved的错分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/22496.html