从反应样板中删除服务器
Remove server from react-boilerplate
如何从 react-boilerplate 中删除服务器文件夹?另一个人https://github.com/react-boilerplate/react-boilerplate/issues/2110也在这里提出问题。
如果您觉得受到骚扰,请用 rm -rf ./server
删除 :)
仅删除服务器文件夹将不起作用,因为 webpack 开发配置正在利用它进行热重载以及您的 npm start
命令从该文件夹启动 express 服务器。
如果您想完全删除服务器文件夹,但仍希望应用程序像热重新加载等一样正常工作,请按照以下步骤操作。在这种情况下,我们将需要 webpack 开发服务器:
- 手动删除
./server
文件夹。
- 安装
webpack-dev-server
和 react-hot-loader
作为开发依赖项。
在您的 ./internals/webpack/webpack.dev.babel.js
中,进行以下修改:
将条目更改为:
entry: [
require.resolve('react-app-polyfill/ie11'),
'react-hot-loader/patch',
`webpack-dev-server/client?http://localhost:3000/`,
'webpack/hot/only-dev-server',
path.join(process.cwd(), 'app/app.js'), // Start with js/app.js
],
在输出中添加 publicPath:
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
publicPath: `http://localhost:3000/`,
},
在同一文件中添加 webpack 开发服务器配置 属性:
devServer: {
port: 3000,
publicPath: `http://localhost:3000/`,
compress: true,
noInfo: false,
stats: 'errors-only',
inline: true,
lazy: false,
hot: true,
open: true,
overlay: true,
headers: { 'Access-Control-Allow-Origin': '*' },
contentBase: path.join(__dirname, '..', '..', 'app', 'build'),
watchOptions: {
aggregateTimeout: 300,
ignored: /node_modules/,
poll: 100,
},
historyApiFallback: {
verbose: true,
disableDotRule: false,
},
},
在./internals/webpack/webpack.base.babel.js
中添加行:
devServer: options.devServer,
最后,修改 package.json
中的启动脚本,如下所示:
"start": "cross-env NODE_ENV=development node --trace-warnings ./node_modules/webpack-dev-server/bin/webpack-dev-server --color --config internals/webpack/webpack.dev.babel.js",
你很高兴去!!
如何从 react-boilerplate 中删除服务器文件夹?另一个人https://github.com/react-boilerplate/react-boilerplate/issues/2110也在这里提出问题。
如果您觉得受到骚扰,请用 rm -rf ./server
删除 :)
仅删除服务器文件夹将不起作用,因为 webpack 开发配置正在利用它进行热重载以及您的 npm start
命令从该文件夹启动 express 服务器。
如果您想完全删除服务器文件夹,但仍希望应用程序像热重新加载等一样正常工作,请按照以下步骤操作。在这种情况下,我们将需要 webpack 开发服务器:
- 手动删除
./server
文件夹。 - 安装
webpack-dev-server
和react-hot-loader
作为开发依赖项。 在您的
./internals/webpack/webpack.dev.babel.js
中,进行以下修改:将条目更改为:
entry: [ require.resolve('react-app-polyfill/ie11'), 'react-hot-loader/patch', `webpack-dev-server/client?http://localhost:3000/`, 'webpack/hot/only-dev-server', path.join(process.cwd(), 'app/app.js'), // Start with js/app.js ],
在输出中添加 publicPath:
output: { filename: '[name].js', chunkFilename: '[name].chunk.js', publicPath: `http://localhost:3000/`, },
在同一文件中添加 webpack 开发服务器配置 属性:
devServer: { port: 3000, publicPath: `http://localhost:3000/`, compress: true, noInfo: false, stats: 'errors-only', inline: true, lazy: false, hot: true, open: true, overlay: true, headers: { 'Access-Control-Allow-Origin': '*' }, contentBase: path.join(__dirname, '..', '..', 'app', 'build'), watchOptions: { aggregateTimeout: 300, ignored: /node_modules/, poll: 100, }, historyApiFallback: { verbose: true, disableDotRule: false, }, },
在
./internals/webpack/webpack.base.babel.js
中添加行:devServer: options.devServer,
最后,修改 package.json
中的启动脚本,如下所示:
"start": "cross-env NODE_ENV=development node --trace-warnings ./node_modules/webpack-dev-server/bin/webpack-dev-server --color --config internals/webpack/webpack.dev.babel.js",
你很高兴去!!