我正在学习一门课程,作者通过以下方式导出了一个组件:
export MainContainer from './Main/MainContainer'
默认的正确方法是export { default as MainContainer } from './Main/MainContainer'哪个不那么干净。作者可以使用 babel-eslint 包来做到这一点,但是在我安装该包后,我仍然收到 lint 错误。
文件结构:
预期的
export MainContainer from './Main/MainContainer'在 container/index.js 中使用时没有 ESlint 错误。该导出语句应该允许 config/routes.js 像这样导入 MainContainer:
import { MainContainer } from '../containers'
结果
ESlint 错误:
容器/主/MainContainer.js
import React from 'react'
export default class MainContainer extends React.Component {
render () {
return (
<p>Hello World</p>
)
}
}
容器/index.js
export MainContainer from './Main/MainContainer'
// export { default as MainContainer } from './Main/MainContainer'
配置/routes.js
import ReactDom from 'react-dom'
import routes from './config/routes'
ReactDom.render(
routes,
document.getElementById('app')
)
我安装了以下软件包:
"devDependencies": {
"babel-core": "^6.25.0",
"babel-eslint": "^8.0.0-alpha.15",
"babel-loader": "^7.1.1",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"css-loader": "^0.28.4",
"eslint": "^4.2.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^7.1.0",
"eslint-plugin-standard": "^3.0.1",
"html-webpack-plugin": "^2.29.0",
"style-loader": "^0.18.2",
"webpack": "^3.2.0",
"webpack-dev-server": "^2.5.1"
}
npm 运行 lint 脚本:
"lint": "eslint app/.; exit 0",
.babelrc
{
presets: [
'react',
'es2015',
'stage-0',
'stage-1'
],
"plugins": ["transform-export-extensions"]
}
.eslintrc
{
parser: "babel-eslint",
env: {
es6: true,
browser: true
},
parserOptions: {
ecmaVersion: 6,
sourceType: "module",
ecmaFeatures: {
jsx: true,
experimentalObjectRestSpread: true
}
},
plugins: [
"react",
],
extends: ["eslint:recommended", "plugin:react/recommended", "standard"],
"rules": {
"no-console": [2, {allow: ["warn", "error"]}],
"comma-dangle" : [2, "always-multiline"],
"semi": [2, "never"],
"no-extra-semi": 2,
"jsx-quotes": [2, "prefer-single"],
"react/jsx-boolean-value": [2, "always"],
"react/jsx-closing-bracket-location": [2, {selfClosing: "after-props", nonEmpty: "after-props"}],
"react/jsx-curly-spacing": [2, "never", {"allowMultiline": false}],
"react/jsx-max-props-per-line": [2, {maximum: 3}],
"react/jsx-no-literals": 2,
"react/self-closing-comp": 2,
"react/sort-comp": 2
}
}


