Я делаю оценку приложения, которую я закончил, если бы не проблема, для которой я не могу найти решение. Некоторые из требований заключаются в том, чтобы не использовать CRA (create-react-app) и настроить свой собственный Webpack, что я и сделал, а затем отправить окончательное реагирующее приложение на Github Pages, где я получаю ошибки.
После того, как я установил gh-pages и запустил npm run deploy, я, очевидно, получаю сообщение об ошибке: npm ERR! отсутствует script: build, потому что у меня его нет. Поскольку меня использовали только для запуска CRA и чтобы он работал, я ошибочно никогда не задавался вопросом, что делает каждый скрипт из реактивных скриптов.
Поэтому я не понимаю, что мне теперь делать со сценарием сборки. Любая помощь будет здорово.
Вот пакет.json:
{
"name": "assessment",
"homepage": "https://myUsername.github.io/Github_followers_front-end/",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "webpack serve --config ./webpack.config.js --mode development",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"keywords": [],
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"antd": "^4.9.4",
"axios": "^0.21.0",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"gh-pages": "^3.1.0",
"lodash": "^4.17.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-hot-loader": "^4.13.0",
"style-loader": "^2.0.0",
"svg-url-loader": "^7.1.1",
"webpack": "^5.11.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"dotenv": "^8.2.0"
}
}
Вот файл webpack.config.js:
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, './src/index.js'),
module: {
rules: [
// React loader
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
// css loader
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
// Images loader
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
// SVG loader
{
test: /\.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {
limit: 10000,
},
},
],
},
]
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
},
plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
contentBase: path.resolve(__dirname, './dist'),
port: 3000,
hot: true
},
};
И .babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
Добавьте это к объекту scripts
в вашем файле package.json
"build": "webpack --mode production"
Итак, ваш scripts
выглядит так
"scripts": {
"start": "webpack serve --config ./webpack.config.js --mode development",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"build": "webpack --mode production"
},
Конечно, в этом случае вам нужно создать скрипт сборки самостоятельно, что, скорее всего,
build: webpack