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": [],
      "consistent-return": [],
      "generator-star-spacing": [],
      "global-require": [],
      "import/extensions": [],
      "import/no-extraneous-dependencies": [],
      "import/no-unresolved": [],
      "import/prefer-default-export": [],
      "jsx-a11y/no-static-element-interactions": [],
      "no-bitwise": [],
      "no-cond-assign": [],
      "no-else-return": [],
      "no-nested-ternary": [],
      "no-restricted-syntax": [],
      "no-use-before-define": [],
      "react/forbid-prop-types": [],
      "react/jsx-filename-extension": [, { "extensions": [".js"] }],
      "react/jsx-no-bind": [],
      "react/prefer-stateless-function": [],
      "react/prop-types": [],
      "require-yield": [],
      "no-unused-vars": [],
      "space-infix-ops": [],
      "object-shorthand": [],
      "quotes": ,//[1, "single"],
      "jsx-quotes": ,
      "prefer-const": [],
      "indent": [, ],
      "react/jsx-indent": [, ],
      "curly": [, "all"],
      "comma-dangle": [, "never"],
      "react/jsx-indent-props": ,
      "react/jsx-curly-spacing": ,
      "space-in-parens": ,
      "no-irregular-whitespace": ,
      "no-mixed-spaces-and-tabs": [, false],
      "no-underscore-dangle": ,
      "key-spacing": ,
      "no-param-reassign": ,
      "no-lonely-if": ,
      "linebreak-style": ,
      "max-len": [, ],
      "class-methods-use-this": ,
      "quote-props":,
      "no-shadow": ,
      "guard-for-in": ,
      "no-labels": ,
      "prefer-template": ,
      "react/sort-comp":
    },
    "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 ，浏览器显示页面