react项目实践——（4）依赖安装与配置

1. 修改package.json，添加需要安装的包

{

"name": "myapp",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo "Error: no test specified" && exit 1",

"build": "webpack",

"start": "cross-env NODE_ENV=development webpack-dev-server --hotOnly --open"

},

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {

"babel-core": "^6.26.3",

"babel-eslint": "^8.2.3",

"babel-loader": "^7.1.4",

"babel-polyfill": "^6.26.0",

"babel-preset-react-app": "^3.1.1",

"clean-webpack-plugin": "^0.1.19",

"cross-env": "^5.2.0",

"eslint": "^4.19.1",

"eslint-config-airbnb": "^16.1.0",

"eslint-plugin-import": "^2.12.0",

"eslint-plugin-jsx-a11y": "^6.0.3",

"eslint-plugin-react": "^7.8.2",

"html-webpack-plugin": "^3.2.0",

"webpack": "^4.8.3",

"webpack-cli": "^2.1.3",

"webpack-dev-server": "^3.1.4"

},

"dependencies": {

"lodash": "^4.17.10",

"react": "^16.4.0",

"react-dom": "^16.4.0",

"react-redux": "^5.0.7",

"react-router-dom": "^4.2.2"

}

}

2. 运行 npm i ，安装。

3. 修改webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: path.resolve(__dirname, './src/index.js')
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    hot: true
  },
  mode: 'development',
  output: {
    filename: '[name]_[hash:8].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './public/index.html'), // src文件
      filename: 'index.html'// dist文件
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    rules: [
      {
        test: /.jsx?$/,
        loader: require.resolve('babel-loader'),
        exclude: /node-modules/
      }
    ]
  }
};

4. 在根目录创建.eslintrc文件

{
    "parser": "babel-eslint",
    "extends": "airbnb",
    "rules": {
      "arrow-body-style": [0],
      "consistent-return": [0],
      "generator-star-spacing": [0],
      "global-require": [1],
      "import/extensions": [0],
      "import/no-extraneous-dependencies": [0],
      "import/no-unresolved": [0],
      "import/prefer-default-export": [0],
      "jsx-a11y/no-static-element-interactions": [0],
      "no-bitwise": [0],
      "no-cond-assign": [0],
      "no-else-return": [0],
      "no-nested-ternary": [0],
      "no-restricted-syntax": [0],
      "no-use-before-define": [0],
      "react/forbid-prop-types": [0],
      "react/jsx-filename-extension": [1, { "extensions": [".js"] }],
      "react/jsx-no-bind": [0],
      "react/prefer-stateless-function": [0],
      "react/prop-types": [0],
      "require-yield": [1],
      "no-unused-vars": [0],
      "space-infix-ops": [0],
      "object-shorthand": [0],
      "quotes": 0,//[1, "single"],
      "jsx-quotes": 0,
      "prefer-const": [0],
      "indent": [2, 4],
      "react/jsx-indent": [1, 4],
      "curly": [1, "all"],
      "comma-dangle": [2, "never"],
      "react/jsx-indent-props": 0,
      "react/jsx-curly-spacing": 0,
      "space-in-parens": 0,
      "no-irregular-whitespace": 2,
      "no-mixed-spaces-and-tabs": [2, false],
      "no-underscore-dangle": 1,
      "key-spacing": 0,
      "no-param-reassign": 0,
      "no-lonely-if": 0,
      "linebreak-style": 0,
      "max-len": [2, 300],
      "class-methods-use-this": 0,
      "quote-props":0,
      "no-shadow": 0,
      "guard-for-in": 0,
      "no-labels": 0,
      "prefer-template": 0,
      "react/sort-comp": 0
    },
    "parserOptions": {
      "ecmaFeatures": {
        "experimentalObjectRestSpread": true
      }
    },
    "env": {
      "browser": true,
      "node": true
    }
  }

5. 在根目录创建.babelrc文件

{
    "presets": [
        "react-app"
    ]
}

6. 修改index.js

import React from 'react';
import ReactDom from 'react-dom';
import { Router, Route } from 'react-router-dom';

class App extends React.Component {
    render() {
        return (
            <div>Hello,React~</div>
        )
    }
}
ReactDom.render(
    <App />,
    document.getElementById('app'),
)

7. 在根目录新建public文件夹，将index.html移动到该文件下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>react</title>
</head>

<body>
    <div id="app"></div>
</body>

</html>

8. 运行 npm start ，浏览器显示页面