React Native 和 Webpack：當 ESLint 檢測到錯誤時令人困惑

Question

對於 React Native 項目，我使用的是react-native-webpack-server 、 babel 、 eslint和webpack-hotloader

當ESLint在我的 Javascript 代碼中檢測到錯誤時，iOS 模擬器仍然刷新應用程序並顯示ESLint 。 但是顯示由ESLint報告的ESLint ，我有來自index.ios.bundle的錯誤， 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包。