我知道这似乎是基本的东西，但是我真的很努力，我只能找到有关如何在 Heroku 或 DigitalOcean 上部署简单的React应用程序的教程。
实际上我有
前端：React
后端：Express和nodejs。
我在OVH有一个虚拟主机，无法使用npm，因此我需要在本地进行构建，然后将文件推送到主机上。
这是我前端的 package.json
{
"name": "client",
"version": "0.1.0",
"license": "None",
"private": true,
"config": {
"mongoDir": "/usr/local"
},
"dependencies": {
"@babel/cli": "^7.0.0",
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"@material-ui/core": "^3.5.1",
"@svgr/webpack": "2.4.1",
"awesome-typescript-loader": "^5.2.1",
"axios": "^0.18.0",
"b64-to-blob": "1.2.19",
"babel-eslint": "9.0.0",
"babel-loader": "^8.0.4",
"babel-plugin-named-asset-import": "^0.2.3",
"babel-plugin-react-intl": "^3.0.1",
"babel-preset-react-app": "^6.1.0",
"bfj": "6.1.1",
"bootstrap": "^4.1.2",
"bootstrap-select": "1.13.2",
"case-sensitive-paths-webpack-plugin": "2.1.2",
"chalk": "2.4.1",
"clean-webpack-plugin": "^1.0.0",
"core-js": "2.5.7",
"cors": "2.8.4",
"country-select-js": "2.0.1",
"domino": "2.1.0",
"dotenv-expand": "4.2.0",
"eslint": "5.6.0",
"eslint-config-react-app": "^3.0.5",
"eslint-loader": "2.1.1",
"eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-react": "7.11.1",
"express": "4.16.3",
"express-session": "1.15.6",
"font-awesome": "4.7.0",
"fork-ts-checker-webpack-plugin-alt": "0.4.14",
"fs-extra": "7.0.0",
"hammerjs": "2.0.8",
"html-webpack-plugin": "4.0.0-alpha.2",
"i18n-iso-countries": "3.7.8",
"i18next": "^12.1.0",
"identity-obj-proxy": "3.0.0",
"jest-pnp-resolver": "1.0.1",
"jest-resolve": "23.6.0",
"jquery": "3.3.1",
"js-string-compression": "1.0.1",
"lodash": "4.17.11",
"mini-css-extract-plugin": "0.4.3",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.1.0",
"popper.js": "1.14.3",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.0.6",
"postcss-safe-parser": "4.0.1",
"react": "^16.6.3",
"react-app-polyfill": "^0.1.3",
"react-dev-utils": "^6.1.1",
"react-dom": "^16.6.3",
"react-hot-loader": "^4.3.12",
"react-i18next": "^8.3.8",
"react-intl": "^2.7.2",
"react-phone-input-2": "^2.7.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"resolve": "1.8.1",
"rxjs": "6.2.2",
"simple-line-icons": "2.4.1",
"terser-webpack-plugin": "1.1.0",
"ts-loader": "4.4.2",
"ts-node": "7.0.0",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "3.6.3",
"youtube-player": "5.5.1",
"zone.js": "0.8.26"
},
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/node": "^7.0.0",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"@types/compression": "0.0.36",
"@types/cors": "2.8.4",
"@types/jasmine": "2.8.8",
"@types/jasminewd2": "2.0.3",
"@types/jquery": "3.3.10",
"@types/lodash": "4.14.116",
"@types/node": "8.10.20",
"babel-loader": "^8.0.4",
"babel-plugin-transform-react-jsx": "^6.24.1",
"codelyzer": "4.4.2",
"css-loader": "^1.0.0",
"dotenv": "^6.0.0",
"file-loader": "^2.0.0",
"jasmine-core": "3.1.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "2.0.4",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "2.0.1",
"karma-jasmine": "1.1.2",
"karma-jasmine-html-reporter": "1.2.0",
"node-sass": "^4.10.0",
"protractor": "5.3.2",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.0",
"ts-node": "7.0.0",
"tslint": "5.10.0",
"typescript": "2.7.2",
"url-loader": "^1.1.1",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
},
"scripts": {
"start": "webpack-dev-server --open",
"build": "npm run clean && npm run build:langs && npm run compile",
"test": "node scripts/test.js --env=jsdom",
"clean": "rm -rf ./dist/index.bundle.js",
"compile": "NODE_ENV=production webpack --config ./webpack.config.js --progress --colors",
"build:langs": "NODE_ENV='production' babel-node scripts/mergeMessages.js",
"build:dev": "cp src/environments/environment.dev.ts src/environments/environment.ts && node scripts/build.js",
"start:dev": "npm run build:dev && node scripts/start.js --proxy-config proxy.conf.json",
"server": "node local.js",
"start:mongoDB": "mongod --dbpath $npm_package_config_mongoDir/bin",
"check:mongoDB": "ps wuax | grep -v grep | grep mongod",
"stop:mongoDB": "kill -2 $(ps wuax | grep -v grep | grep mongod | awk '{ print $2 }')",
"build:prod": "cp src/environments/environment.prod.ts src/environments/environment.ts && npm run build:server:prod && npm run build:browser:prod && mv dist/browser dist/www",
"build:docker": "npm run build:prod && docker-compose build && docker-compose up",
"start:prod": "rm -rf dist && npm run build:prod && npm run server",
"build:server:prod": "npm run build",
"build:browser:prod": "node scripts/build.js --prod --build-optimizer"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"resolver": "jest-pnp-resolver",
"setupFiles": [
"react-app-polyfill/jsdom"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
],
"testEnvironment": "jsdom",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
]
}
}
这是我的 webpack.config.js
const webpack = require('webpack');
const path = require('path');
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(ts|tsx)?$/,
use: {
loader: 'awesome-typescript-loader'
},
exclude: /node_modules/
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.svg$/,
use: 'file-loader'
},
{
test: /\.png$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png'
}
}
]
}
]
},
resolve: {
extensions: [
'.js',
'.jsx'
]
},
devServer: {
contentBase: './dist'
}
}
module.exports = config;
要编译我的后背和正面，我使用的是开发人员在使用此 package.json
之前编写的脚本{
"name": "root",
"version": "0.0.0",
"license": "None",
"config": {
"environment": "environment.prod.ts"
},
"scripts": {
"build:front": "cp environments/$npm_package_config_environment node_modules/client/src/environments/environment.prod.ts && cd node_modules/client && npm install && npm run build:prod",
"build:back": "cd node_modules/server && npm install && npm run build:prod",
"build": "npm run build:front && npm run build:back && npm run cpy:config && npm run cpy:front && npm run cpy:back && npm run cpy:dist",
"cpy:front": "cp -R ./node_modules/client/dist/* ./dist",
"cpy:back": "cp -R ./node_modules/server/dist/* ./dist/server",
"cpy:config": "cp config.js dist/",
"cpy:dist": "cp -R ./dist ./tmp",
"cpy:env": "cp .env.production .env",
"clean": "rm -rf node_modules && rm -rf ./dist && mkdir -p dist/server && rm -rf ./tmp",
"build:start": "npm run build && npm run start",
"preinstall": "npm run clean",
"postinstall": "npm run build",
"start": "node local.js",
"dev:start:mongoDB": "cd node_modules/server && npm run start:mongoDB",
"dev:stop:mongoDB": "cd node_modules/server && npm run stop:mongoDB"
},
"repository": {
"type": "git",
"url": "git+https://github.com/foo/root.git"
},
"private": true,
"dependencies": {
"dotenv": "6.0.0",
"express": "4.16.3",
"server": "git+https://github.com/foo/server.git",
"client": "git+https://github.com/foo/client.git"
}
}
我真的对所有这些东西感到困惑，在离开之前，他与我们的老板争执不休，所以他不再想要帮助我们。
实际上，当我使用npm install运行此程序包时，出现此错误
ERROR in ./src/index.js 27:16
Module parse failed: Unexpected token (27:16)
You may need an appropriate loader to handle this file type.
| localeData.en;
|
> ReactDOM.render(<BrowserRouter><IntlProvider locale={language} messages={messages}><App /></IntlProvider></BrowserRouter>, document.getElementById('root'))
|
| // If you want your app to work offline and load faster, you can change
脚本执行NODE_ENV=production webpack --config ./webpack.config.js --progress --colors
我不明白为什么，因为当我跑步时
npm build
与我的前端程序包一起使用，效果很好...
我不必使用他的根脚本，但是我不知道该怎么做，我应该将哪些文件复制到我的虚拟主机中以使我的应用在线。