[英]eslint imports in webpack: Unable to resolve path to module
使用eslint-import-resolver-webpack,我試圖通過引用“快捷方式”(例如,components / Counter)讓eslint知道我要導入文件。
在下面的示例中,webpack(v2.2.0-rc.3)可以很好地構建,但是測試失敗,因為它是“無法解析模塊'組件/計數器'的路徑”。 導入“組件/計數器/歸約器”時也會出現此錯誤,因此它不僅限於索引。
運行npm run lint
和我的IDE(IntelliJ)都給出相同的錯誤。
在文檔之后,我設置了以下配置:
(部分)文件結構:
project-root/
app/
components/
Counter/
index.js
reducer.js
app.js
internals/
config/
.eslintrc
webpack.test.js
package.json
文件:project-root / app / app.js
import Counter from 'components/Counter'
// etc...
摘錄:project-root / package.json
...
"lint": "npm run lint:eslint -- . ",
"lint:eslint": "eslint -c internals/config/.eslintrc --fix --ignore-path .gitignore --ignore-pattern internals"
...
文件:project-root / config / .eslintrc
{
"parser": "babel-eslint",
"extends": "airbnb",
"env": {
"browser": true,
"node": true,
"mocha": true,
"es6": true
},
"plugins": [
"redux-saga",
"react",
"jsx-a11y"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"settings": {
"import/resolver": {
"webpack": {
"config": "./internals/config/webpack.test.js"
}
}
},
"rules": {
"arrow-parens": [
"error",
"always"
],
"import/imports-first": 0,
"import/newline-after-import": 0,
"import/no-dynamic-require": 0,
"import/no-extraneous-dependencies": 0,
"import/no-named-as-default": 0,
"import/prefer-default-export": 0,
"jsx-a11y/aria-props": 2,
"jsx-a11y/heading-has-content": 0,
"jsx-a11y/href-no-hash": 2,
"jsx-a11y/label-has-for": 2,
"jsx-a11y/mouse-events-have-key-events": 2,
"jsx-a11y/role-has-required-aria-props": 2,
"jsx-a11y/role-supports-aria-props": 2,
"max-len": [
2,
120,
2,
{
"ignoreComments": true,
"ignoreTrailingComments": false,
"ignoreRegExpLiterals": true
}
],
"newline-per-chained-call": [
2,
{
"ignoreChainWithDepth": 4
}
],
"no-console": [
1,
{
"allow": [
"warn",
"error"
]
}
],
"no-use-before-define": [
2,
{
"functions": false,
"classes": true
}
],
"prefer-template": 2,
"class-methods-use-this": 0,
"react/forbid-prop-types": 0,
"react/jsx-uses-vars": 2,
"react/jsx-first-prop-new-line": [
2,
"multiline"
],
"react/jsx-filename-extension": 0,
"react/jsx-no-target-blank": 0,
"react/prefer-stateless-function": 0,
"react/require-extension": 0,
"react/self-closing-comp": 0,
"redux-saga/no-yield-in-race": 2,
"redux-saga/yield-effects": 2,
"semi": [
2,
"never"
]
}
}
並且:project-root / internals / config / webpack.test.js:
const webpack = require('webpack')
module.exports = {
devtool: 'inline-source-map',
module: {
loaders: [
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.css$/, loader: 'null-loader' },
{ test: /\.js$/,
loader: 'babel',
exclude: [/node_modules/],
},
{ test: /\.jpe?g$|\.gif$|\.png$|\.svg$/i,
loader: 'null-loader',
},
],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
],
resolve: {
modules: [
'app',
'node_modules',
],
},
}
注意:我也嘗試過指向僅導出resolve對象的文件。 一樣:
module.exports = {
resolve: {
modules: [
'app',
'node_modules',
],
}
}
看來我的依賴項需要更新...
徹底的起毛過程需要大量的插件,配置等。
-編輯-
這是我項目的依賴關系的摘錄。 這里可能有一些不必要的軟件包,我只刪除了那些肯定不會造成影響的軟件包。
請注意,前端區域在6檔時像獵豹一樣移動,因此版本可能很快就會過時。 無論如何,截至目前(2017年2月),這是一個有效的配置。
"dependencies": {
"babel-polyfill": "6.16.0",
"react": "15.4.2",
"react-dom": "15.4.2",
},
"devDependencies": {
"babel-cli": "6.18.0",
"babel-core": "6.21.0",
"babel-eslint": "7.1.0",
"babel-loader": "6.2.10",
"babel-plugin-react-transform": "2.0.2",
"babel-preset-es2015": "6.18.0",
"babel-preset-react": "6.16.0",
"babel-preset-stage-3": "6.17.0",
"babel-register": "6.22.0",
"eslint": "3.13.1",
"eslint-config-airbnb": "14.0.0",
"eslint-import-resolver-webpack": "0.8.0",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-jsx-a11y": "3.0.2",
"eslint-plugin-react": "6.9.0",
"eslint-plugin-redux-saga": "0.1.5",
"webpack": "2.2.0",
"webpack-dev-middleware": "1.9.0",
"webpack-hot-middleware": "2.14.0"
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.