![](/img/trans.png)
[英]How to import node module or JavaScript file without webpack dependency when using create-react-app?
[英]How to set the package.json for deployment without using create-react-app and only using my own Webpack?
我正在做一個應用程序評估,如果不是針對我找不到解決方案的問題,我會完成該評估。 一些要求是不使用 CRA (create-react-app) 並配置我自己的 Webpack,我這樣做了,然后將最終的 react 應用程序推送到 Github Pages,這是我遇到錯誤的地方。
在我安裝了 gh-pages 並運行 npm 運行部署之后,我顯然得到了錯誤:npm ERR:缺少腳本,構建。 因為我沒有它,因為我只是用來運行 CRA 並讓它工作。 我錯誤地從未想過 react-scripts 中的每個腳本是做什么的。
所以我對現在應該用構建腳本做什么感到困惑。 任何幫助都會很棒。
這是 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"
]
}
將此添加到package.json
文件中的scripts
object
"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"
},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.