React构建工具和开发服务器 [英] React Build Tool and Dev Server
问题描述
在为学习目的而开始的项目中，需要设置DEV环境和服务器方面的一些指导。我想用Bootstrap使用ReacJS。上次我使用ReactJS时，构建和服务器已经配置好了，我不必做太多工作。我们使用npm，gulp和其他一些东西。
现在我正试图设置它，但我不知道该怎么做。有人可以概述我可以遵循的最简单的步骤。我想使用最新版本的React生态系统，最好有一个构建系统来缩小和合并文件和内容。 Google上有这么多信息令人困惑。我面临的另一个挑战是哪些版本要在package.json中指定。我决定使用webpack，而不是一口气。不太确定是否应该用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'，
输出：{
路径：__dirname，
fi lename：'bundle.js'
}，
模块：{
加载器：[
{
test：/\.jsx?$/，
exclude：/ node_modules /，
loader：'babel-loader'，
query：{presets：['es2015'，'react']}
}
]
}
};
最简单的步骤我可以按照。
我遇到了非常相似的情况，但我正在与反应， redux ， react-redux ，其他图书馆和使用 axios 发送（http）请求，我必须自己弄清楚，以下是我所做的：
注意：确保您有 Node.js ，因为我在这里有Node和webpack-dev-server
使用npm安装项目依赖关系。
内部脚本，我已经给出了链接到node和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：{
核心：^ 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
}
}
var webpack = require（'webpack'）;
var path = require（'path'）;
module.exports = {
entry：{
bundle：'./src/index.js'，
}，
输出：{
路径：__dirname，
publicPath：'/'，
文件名：'bundle.js'
}，
模块：{
加载器：[{
exclude：/ node_modules /，
loader：'babel-loader'，
query：{
presets：['react'，'es2015'，'stage- 1']
}
}]
}，
解析：{
extensions：['*'，'.js'，'.jsx']
}，
devServer：{
historyApiFallback：true，
contentBase：'./'
}
};
然后确保包含。babelrc
{
预设 ：[react，es2015，stage-1]
}
如果您有 github存储库，请确保包含.gitignore文件，以便这些文件夹或文件不会包含在git中repo
.gitignore
/ node_modules
包。 js
npm-debug.log
.DS_Store
如果你认为所有这一切都是压倒一切的，一开始就太多了，那么最好的开始是 create-react-app
Need some direction in terms of setting up the DEV environment and server for a project I'm starting for learning purposes. I want to use ReacJS with Bootstrap. Last time I worked with ReactJS, the build and server was already configured and I did not have to do much. We were using npm, gulp and bunch of other stuff.
Now that I'm trying to set this up, I'm not sure what to do. Can someone outline the simplest steps I can follow. I want to use latest versions of React eco-system and ideally have a build system to minify and combine files and stuff. There is so much info on Google that it is confusing. Another challenge I'm facing is that which versions to specify in package.json. Instead of gulp I decided to use webpack. Wasn't really sure if to go with gulp or webpack but decided to go with webpack. It is all working but not sure if I have the most updated versions of everything or need more stuff. I know for sure I don't have any watchers to auto refresh page on changes. For server I'm just using npm, not sure if that is all I need or there are any advantages of using others. This is my 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"
}
}
Below is the 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' ] }
}
]
}
};
Can someone outline the simplest steps I can follow.
I have faced very similar situation but i was working with react, redux, react-redux, other libraries and using axios for sending (http) request where i have to figure out by myself , Here's what i did :
NOTE: Make sure you have Node.js installed because i have Node along with webpack-dev-server here
npm init
Installed project dependencies using npm. Inside script i have given link to node and webpack-dev-server as you can see
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"
}
}
And this is 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: './'
}
};
And then make sure to include .babelrc
{
"presets": ["react", "es2015", "stage-1"]
}
And if you have github repository make sure to include .gitignore file so that these folders or files will not be included in git repo
.gitignore
/node_modules
bundle.js
npm-debug.log
.DS_Store
If you think all of this is overwhelming and too much for a start then best place to start with is create-react-app
这篇关于React构建工具和开发服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
