React 构建工具和开发服务器

Question

在为我开始学习的项目设置 DEV 环境和服务器方面需要一些指导。 我想在 Bootstrap 中使用 ReacJS。 上次我使用 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 安装项目依赖项。 如您所见，在脚本内部，我已提供指向 node 和 webpack-dev-server 的链接

包.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 存储库，请确保包含 .gitignore 文件，以便这些文件夹或文件不会包含在 git repo 中

.gitignore

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

如果您认为所有这些对于开始来说都是压倒性的并且太多了，那么最好的起点是create-react-app