React Native & Webpack：ESLint 检测到错误时令人困惑

Question

对于 React Native 项目，我使用 react-native-webpack-server、babel、eslint 和 webpack-hotloader

当 ESLint 检测到我的 Javascript 代码中的错误时，iOS 模拟器仍会刷新应用程序并显示堆栈跟踪。但我没有显示 ESLint 报告的错误，而是 index.ios.bundle 的错误，这些错误可能令人困惑且难以调试。

例如使用此代码：

'use strict';

import React, {
    StyleSheet,
    Text,
    View,
    TouchableHighlight,
    Component
} from 'react-native';

rger // This will cause an error.

export default class ContactsComponent extends Component {
  render() {
    return (
      <View>
        <Text>This is a simple application.</Text>
      </View>
    );
  }
}

ESLint 报告了这个错误：

11:1   error    "rger" is not defined // Pretty straightforward

并且这个错误报告给模拟器（所以 React Native）：

Invariant Violation: Application ContactsComponent has not been registered. This is either due to a require() error during initialization or failure to call AppRegistry.registerComponent.

这条错误消息并不是很简单。

我想知道是否有更有效的使用方法ESLint，也许是直接在模拟器中显示错误？

这是我的webpack.config.js：

var fs = require('fs');
var path = require('path');
var webpack = require('webpack');

var config = {

  debug: true,

  devtool: 'source-map',

  entry: {
    'index.ios': ['./javascript/ios.js'],
  },

  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js',
  },

  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ["babel?stage=0", "eslint"]
    }]
  },

  plugins: [],

};

// Hot loader
if (process.env.HOT) {
  config.devtool = 'eval'; // Speed up incremental builds
  config.entry['index.ios'].unshift('react-native-webpack-server/hot/entry');
  config.entry['index.ios'].unshift('webpack/hot/only-dev-server');
  config.entry['index.ios'].unshift('webpack-dev-server/client?http://localhost:8082');
  config.output.publicPath = 'http://localhost:8082/';
  config.plugins.unshift(new webpack.HotModuleReplacementPlugin());
  config.module.loaders[0].query.plugins.push('react-transform');
  config.module.loaders[0].query.extra = {
    'react-transform': {
      transforms: [{
        transform: 'react-transform-hmr',
        imports: ['react-native'],
        locals: ['module']
      }]
    }
  };
}

// Production config
if (process.env.NODE_ENV === 'production') {
  config.plugins.push(new webpack.optimize.OccurrenceOrderPlugin());
  config.plugins.push(new webpack.optimize.UglifyJsPlugin());
}

module.exports = config;

和.eslintrc：

{
  "parser": "babel-eslint",
  "plugins": [
    "react"
  ],
  "ecmaFeatures": {
    "jsx": true
  },
  "extends": "eslint:recommended",
  "rules": {
    "react/display-name": 1,
    "react/forbid-prop-types": 1,
    "react/jsx-boolean-value": 1,
    "react/jsx-closing-bracket-location": 1,
    "react/jsx-curly-spacing": 1,
    "react/jsx-indent-props": 1,
    "react/jsx-max-props-per-line": 1,
    "react/jsx-no-duplicate-props": 1,
    "react/jsx-no-literals": 1,
    "react/jsx-no-undef": 1,
    "react/jsx-quotes": 1,
    "react/jsx-sort-prop-types": 1,
    "react/jsx-sort-props": 1,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/no-danger": 1,
    "react/no-did-mount-set-state": 1,
    "react/no-did-update-set-state": 1,
    "react/no-direct-mutation-state": 1,
    "react/no-multi-comp": 1,
    "react/no-set-state": 1,
    "react/no-unknown-property": 1,
    "react/prop-types": 1,
    "react/react-in-jsx-scope": 1,
    "react/require-extension": 1,
    "react/self-closing-comp": 1,
    "react/sort-comp": 1,
    "react/wrap-multilines": 1,
    "strict": 0
  }
}

有什么建议吗？

Answer 1

我找到了直接在模拟器中显示错误的方法。我只是使用 eslint-loader 包。

React Native & Webpack：ESLint 检测到错误时令人困惑

React Native & Webpack: Confusing when ESLint detects errors

javascript

eslint

webpack

react-native