Question

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

现在我正试图设置它，我不知道该怎么办。有人可以概述我可以遵循的最简单的步骤。我想使用最新版本的React生态系统，理想情况下有一个构建系统来缩小和组合文件和内容。 Google上有太多信息令人困惑。我面临的另一个挑战是在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 init

使用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

React Build Tool和Dev Server

1 个答案: