React 构建工具和开发服务器

Question

在为我开始学习的项目设置 DEV 环境和服务器方面需要一些指导。我想将 ReacJS 与 Bootstrap 一起使用。上次我使用 ReactJS 时，构建和服务器已经配置好了，我不需要做太多事情。我们使用了 npm、gulp 和其他一些东西。

现在我正在尝试设置它，我不知道该怎么做。有人可以概述我可以遵循的最简单的步骤。我想使用最新版本的 React 生态系统，理想情况下有一个构建系统来缩小和组合文件和东西。谷歌上的信息太多了，令人困惑。我面临的另一个挑战是在 package.json 中指定哪些版本。我决定使用 webpack 而不是 gulp。不确定是使用 gulp 还是 webpack，但决定使用 webpack。一切正常，但不确定我是否拥有所有内容的最新版本或需要更多东西。我确定我没有任何观察者可以自动刷新页面的更改。对于服务器，我只是使用 npm，不确定这是否就是我所需要的，或者使用其他服务器有什么好处。 这是我的 package.json

   {
  "name": "track",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --port 3000 --progress --inline",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
    "dependencies": {
    "html-webpack-plugin": "^2.29.0",
    "path": "^0.12.7",
    "react": "^16.0.0",
    "react-dom": "^15.6.1",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.5.0"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.0",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  }
}

下面是 webpack.config.js

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: { presets: [ 'es2015', 'react' ] }
      }
    ]
  }
};

Answer 1

谁能概述一下我可以遵循的最简单的步骤。

我遇到过非常相似的情况，但我正在使用 react、redux、react-redux、其他库并使用 axios 发送（http）请求，我必须自己弄清楚，这就是我所做的：

注意：请确保您已安装 Node.js，因为我这里有 Node 和 webpack-dev-server

npm 初始化

使用 npm 安装项目依赖项。 如您所见，我在脚本中提供了指向节点和 webpack-dev-server 的链接

package.json

{
  "name": "searchapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  },
  "dependencies": {
    "babel-preset-stage-1": "^6.24.1",
    "lodash": "^4.17.4",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2",
    "redux-promise": "^0.5.3"
  }
}

这是webpack.config.js

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

module.exports = {
  entry: {
    bundle: './src/index.js',
  },

   output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
   resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

然后确保包含.babelrc

{
  "presets": ["react", "es2015", "stage-1"]
}

如果您有github repository，请确保包含 .gitignore 文件，以便这些文件夹或文件不会包含在 git repo 中

.gitignore

/node_modules
bundle.js
npm-debug.log
.DS_Store

如果您认为所有这一切都令人不知所措，而且开始时太多，那么最好的起点是 create-react-app