我正在做一个应用程序评估,已经完成了,但是有一个问题我找不到解决办法。
其中一些要求是不使用CRA(create-react-app),而是配置自己的Webpack,我已经完成了这一步骤,然后将最终的react应用程序推送到Github Pages,但是我在这里遇到了错误。
在安装了gh-pages并运行npm run deploy之后,显然会出现错误:npm ERR!missing script: build,因为我没有它。 由于我习惯于运行CRA并且它可以正常工作,我错误地从未思考过react-scripts中的每个脚本的用途。
因此,我对应该如何处理build脚本感到困惑。 任何帮助都将是极好的。
这是package.json:
在安装了gh-pages并运行npm run deploy之后,显然会出现错误:npm ERR!missing script: build,因为我没有它。 由于我习惯于运行CRA并且它可以正常工作,我错误地从未思考过react-scripts中的每个脚本的用途。
因此,我对应该如何处理build脚本感到困惑。 任何帮助都将是极好的。
这是package.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"
]
}
build: webpack
。 - tmhao2005