2

For a React Native project, I'm using react-native-webpack-server, babel, eslint and the webpack-hotloader

When ESLint detects errors in my Javascript code, the iOS simulator still refresh the app and display the stacktrace. But instead displaying errors reported by ESLint, I've of errors from index.ios.bundle that can be confusing and hard to debug.

For instance with this code:

'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>
    );
  }
}

I have this error reported by ESLint: 

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

And this error reported y the simulator (so 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.

This error message isn't really straightforward.

I wonder if there is a more efficient way to use ESLint, maybe by showing the errors directly in the simulator?

Here is my 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;

And .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
  }
}

Any suggestion?

4

1 回答 1

1

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

于 2015-10-02T15:17:47.197 回答