在我得到答案之前，我假设它与一个废弃的软件有关，这意味着废弃本质上是软件工程的一个自然部分，就像病毒突变是病毒学的一个自然部分一样。下面是我尝试启动服务器时收到的错误:
[noah@Qyain setup]$ npm run webpack
> solution@1.0.0 webpack
> webpack --mode=development --watch
webpack is watching the files…
node:internal/crypto/hash:67
this[kHandle] = new _Hash(algorithm, xofLen);
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at module.exports (/home/noah/Downloads/setup/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:471:10)
at /home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:503:5
at /home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:358:12
at /home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at context.callback (/home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /home/noah/Downloads/setup/node_modules/babel-loader/lib/index.js:59:71 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
[noah@Qyain setup]$
package.json
{
"name": "solution",
"version": "1.0.0",
"description": "This homework covers configuration of a new React project. Download the skeleton [here][skeleton].",
"main": "index.jsx",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"webpack": "webpack --mode=development --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.0",
"babel-preset-env": "^1.7.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"webpack": "^4.17.1"
},
"devDependencies": {
"webpack-cli": "^3.1.0"
}
}
我试图运行一个基本的反应应用程序，并有索引。JSX如下:
import React from 'react';
import ReactDOM from 'react-dom';
import Congrats from './congrats';
document.addEventListener("DOMContentLoaded", () => {
const root = document.getElementById("root");
ReactDOM.render(<Congrats/>, root);
});
我刚刚开始意识到客户端软件工程的力量，并且已经转向react来创建老实说不需要扩展的应用程序，但我在开始react时遇到了麻烦。你知道是怎么回事吗?像往常一样，我收到了非常常见的npm"漏洞"，从低严重性到蓝屏死机级别，以及介于两者之间的所有漏洞，大约有77个奇怪的错误，我将其称为?
我试着遵循这个答案，我卸载了nodex，并在fedora linux中使用dnf重新安装了node16。
[noah@Qyain setup]$ npm run webpack
> solution@1.0.0 webpack
> webpack --mode=development --watch
webpack is watching the files…
node:internal/crypto/hash:67
this[kHandle] = new _Hash(algorithm, xofLen);
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at module.exports (/home/noah/Downloads/setup/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:471:10)
at /home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:503:5
at /home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:358:12
at /home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at context.callback (/home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /home/noah/Downloads/setup/node_modules/babel-loader/lib/index.js:59:71 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
[noah@Qyain setup]$ export NODE_OPTIONS=--openssl-legacy-provider
[noah@Qyain setup]$ npm run webpack
/usr/bin/node: --openssl-legacy-provider is not allowed in NODE_OPTIONS
[noah@Qyain setup]$ npm run webpack
/usr/bin/node: --openssl-legacy-provider is not allowed in NODE_OPTIONS
[noah@Qyain setup]$ npm install
/usr/bin/node: --openssl-legacy-provider is not allowed in NODE_OPTIONS
[noah@Qyain setup]$
以上是我的反应，当我尝试启动应用程序。它似乎不工作。
注意，我创建了一个新项目，它是这样的:
[noah@Qyain my-app]$ npx create-react-app my-app
-> cd my-app
-> npm start
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000
On Your Network: http://10.243.208.85:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
^X^C
[noah@Qyain my-app]$ npm start
[noah@Qyain my-app]$ sudo npm install @babel/core @babel/preset-env @babel/preset-react babel-loader
[sudo] password for noah:
up to date, audited 1444 packages in 5s
193 packages are looking for funding
run `npm fund` for details
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
为什么这些错误是"关键的"，用红色阴影显示，看起来像他们会摧毁我的房子?什么是漏洞，是错误还是安全风险?我不想进行审计，但我认为它会跳到113或其他地方，就像过去一样。
然后我试着安装webpack，再一次更具侵略性，敌意和危险的关键漏洞(这导致我的房子颤抖):
[noah@Qyain my-app]$ npm install webpack
up to date, audited 1444 packages in 5s
193 packages are looking for funding
run `npm fund` for details
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
[noah@Qyain my-app]$
当我继续时，我创建了一个init文件/命令:
[noah@Qyain my-app]$ npm init --yes
Wrote to /home/noah/my-app/package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/core": "^7.18.5",
"@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.17.12",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"babel-loader": "^8.2.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
"webpack": "^5.73.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "promise.js",
"devDependencies": {},
"keywords": [],
"author": "",
"license": "ISC"
}
安装webpack-cli, babel和react-dom
[noah@Qyain my-app]$ npm install webpack-cli babel-loader react react-dom
added 16 packages, and audited 1460 packages in 6s
194 packages are looking for funding
run `npm fund` for details
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
然后我初始化了webpack，并继续让这个派对开始。
[noah@Qyain my-app]$ npx webpack-cli init
[webpack-cli] For using this command you need to install: '@webpack-cli/generators' package.
[webpack-cli] Would you like to install '@webpack-cli/generators' package? (That will run 'npm install -D @webpack-cli/generators') (Y/n) y
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
added 493 packages, and audited 1953 packages in 39s
219 packages are looking for funding
run `npm fund` for details
17 vulnerabilities (3 moderate, 9 high, 5 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
? Which of the following JS solutions do you want to use? ES6
? Do you want to use webpack-dev-server? Yes
? Do you want to simplify the creation of HTML files for your bundle? Yes
? Do you want to add PWA support? Yes
? Which of the following CSS solutions do you want to use? SASS
? Will you be using CSS styles along with SASS in your project? Yes
? Will you be using PostCSS in your project? Yes
? Do you want to extract CSS for every file? Yes
? Do you like to install prettier to format generated configuration? Yes
? Pick a package manager: npm
[webpack-cli] ℹ INFO Initialising project...
conflict package.json
? Overwrite package.json? overwrite
force package.json
conflict src/index.js
? Overwrite src/index.js? overwrite
force src/index.js
conflict README.md
? Overwrite README.md? overwrite
force README.md
create index.html
create webpack.config.js
create .babelrc
create postcss.config.js
npm WARN idealTree Removing dependencies.webpack in favor of devDependencies.webpack
npm WARN idealTree Removing dependencies.webpack-cli in favor of devDependencies.webpack-cli
npm WARN idealTree Removing dependencies.babel-loader in favor of devDependencies.babel-loader
npm WARN idealTree Removing dependencies.@babel/core in favor of devDependencies.@babel/core
npm WARN idealTree Removing dependencies.@babel/preset-env in favor of devDependencies.@babel/preset-env
added 5 packages, changed 2 packages, and audited 1958 packages in 9s
222 packages are looking for funding
run `npm fund` for details
17 vulnerabilities (3 moderate, 9 high, 5 critical)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
[webpack-cli] Project has been initialised with webpack!
[noah@Qyain my-app]$
所以我启动了它，但我想添加开发工具到以下:
// Generated using webpack-cli https://github.com/webpack/webpack-cli
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
const isProduction = process.env.NODE_ENV == "production";
const stylesHandler = MiniCssExtractPlugin.loader;
const config = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
},
devServer: {
open: true,
host: "localhost",
},
plugins: [
new HtmlWebpackPlugin({
template: "index.html",
}),
new MiniCssExtractPlugin(),
// Add your plugins here
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
],
module: {
rules: [
{
test: /.(js|jsx)$/i,
loader: "babel-loader",
},
{
test: /.s[ac]ss$/i,
use: [stylesHandler, "css-loader", "postcss-loader", "sass-loader"],
},
{
test: /.css$/i,
use: [stylesHandler, "css-loader", "postcss-loader"],
},
{
test: /.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: "asset",
},
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
};
module.exports = () => {
if (isProduction) {
config.mode = "production";
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
} else {
config.mode = "development";
}
return config;
};
我该怎么做，在什么情况下我该添加开发工具。相对于webpack、react和整个前端来说，开发工具到底是什么?
// Generated using webpack-cli https://github.com/webpack/webpack-cli
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
const isProduction = process.env.NODE_ENV == "production";
const config = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
},
devServer: {
open: true,
host: "localhost",
},
plugins: [
new HtmlWebpackPlugin({
template: "index.html",
}),
// Add your plugins here
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
],
module: {
rules: [
{
test: /.(js|jsx)$/i,
loader: "babel-loader",
},
{
test: /.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: "asset",
},
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
};
module.exports = () => {
if (isProduction) {
config.mode = "production";
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
} else {
config.mode = "development";
}
return config;
};
我生成一个webpack。尽管它没有回答我最初的问题，但不言而喻，在卸载node18后重新启动一个rect应用程序的创建，安装节点16，然后按照上面的步骤将在React中创建一个完整的生产环境，并应该解决前面的问题。仍然有许多严重的漏洞——如何解决这些问题的建议将受到欢迎!