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